Javascript this 关键字 详解

作者:hebedich 时间:2024-06-07 15:51:18 

一、this指向构造函数实例化对象

在上篇文章中,我们提到了使用new和不使用new调用构造函数的区别,如下例:


function Benjamin(username, sex) {
    this.username = username;
    this.sex = sex;
}
var benjamin = new Benjamin("zuojj", "male");
//Outputs: Benjamin{sex: "male",username: "zuojj"}
console.log(benjamin);
var ben = Benjamin("zhangsan", "female");
//Outputs: undefined
console.log(ben);

当构造函数当做普通函数被调用时,并没有返回值,同时this指向全局对象。那么我们如何来避免因为缺少new关键字,而产生的问题呢?


function Benjamin(username, sex) {
 //Check whether "this" is a "Benjamin" object
 if(this instanceof Benjamin) {
     this.username = username;
     this.sex = sex;
 }else {
  return new Benjamin(username, sex);
 }
}
var benjamin = new Benjamin("zuojj", "male");
//Outputs: Benjamin{sex: "male",username: "zuojj"}
console.log(benjamin);
var ben = Benjamin("zhangsan", "female");
//Outputs: Benjamin {username: "zhangsan", sex: "female"}
console.log(ben);

在上例中,我们首先检查this是否是Benjammin的实例,如果不是,使用new自动调用构造函数,并实例化,这意味着,我们不再需要担心,遗漏new关键字实例化构造函数。当然这样我们可能会养成一个坏的习惯,如果避免这种现象呢?我们可以抛出一个错误,像下面这样:


function Benjamin(username, sex) {
 //Check whether "this" is a "Benjamin" object
 if(this instanceof Benjamin) {
     this.username = username;
     this.sex = sex;
 }else {
  // If not, throw error.
        throw new Error("`Benjamin` invoked without `new`");
 }
}

二、this指向调用该函数的对象

看下面的例子:


var x = 10;
var obj = {
 x: 10,
 output: function() {
  //Outputs: true
  console.log(this === obj);
  return this.x;
 },
 innerobj: {
  x: 30,
  output: function() {
   //Outputs: true
   console.log(this === obj.innerobj);
   return this.x;
  }
 }
};
//Outputs: 10
console.log(obj.output());
//Outputs: 30
console.log(obj.innerobj.output());

三、this指向全局对象

在上面讨论构造函数的时候我们也讨论到不适用new的时候,this会指向全局对象,下面我们来看看两种常见的容易犯错的实例:


var x = 100;
var obj = {
 x: 10,
 output: function() {
  (function() {
   //Outputs: true
   console.log(this === window);
   //Outputs: Inner: 100
   console.log("Inner:" + this.x);
  })();
  
  return this.x;
 }
};
//Outputs: 10
console.log(obj.output());

在使用闭包的时候,作用域发生变化,this指向window(浏览器中)。


var x = 100;
var obj = {
 x: 10,
 output: function() {
  return this.x;
 }
};
var output = obj.output;
//Outputs: 10
console.log(obj.output());
//Outputs: 100
console.log(output());
var obj2 = {
 x: 30,
 output: obj.output
}
//Outputs: 30
console.log(obj2.output());

此时this始终指向函数调用时的对象。

四、this指向apply/call()方法指派的对象


var x = 100;
var obj = {
 x: 10,
 output: function() {
  return this.x;
 }
};
//Outputs: 10
console.log(obj.output());
var obj2 = {
 x: 40,
 output: obj.output
}
//Outputs: 40
console.log(obj.output.call(obj2));
//Outputs: 10
console.log(obj2.output.apply(obj));

五、callback函数內的this指向调用该callback的函数的this所指向的对象


//<input type="text" value="3" id="txt_username">
$("#username").on("click", function() {
 console.log(this.value);
});

六、Function.prototype.bind中的this

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
实例一:


function person() {
 return this.name;
}
//Function.prototype.bind
var per = person.bind({
 name: "zuojj"
});
console.log(per);
var obj = {
 name: "Ben",
 person: person,
 per: per
};
//Outputs: Ben, zuojj
console.log(obj.person(), obj.per());

实例二:


this.x = 9;
var module = {
  x: 81,
  getX: function() { return this.x; }
};
//Outputs: 81
console.log(module.getX());
var getX = module.getX;
//Outputs: 9, because in this case, "this" refers to the global object
console.log(getX);
// create a new function with 'this' bound to module
var boundGetX = getX.bind(module);
//Outputs: 81
console.log(boundGetX());

标签:Javascript,this
0
投稿

猜你喜欢

  • Python统计词频的几种方法小结

    2023-10-22 05:35:41
  • go mode tidy出现报错go: warning: “all“ matched no packages的解决方法

    2024-02-04 22:35:14
  • 微信小程序应用号开发教程详解

    2022-07-05 00:34:50
  • 详解Numpy数组转置的三种方法T、transpose、swapaxes

    2023-01-14 21:42:13
  • 常用ASCII 码对照表

    2007-08-21 14:35:00
  • JS与Ajax Get和Post在使用上的区别实例详解

    2024-04-23 09:07:40
  • javaScript让文本框内的最后一个文字的后面获得焦点实现代码

    2024-04-16 08:57:55
  • 关于H1的位置

    2008-04-30 12:20:00
  • Python实现一键下载视频脚本

    2023-08-26 18:51:17
  • python中format()函数的简单使用教程

    2021-07-10 15:34:01
  • 一些CSS样式书写技巧

    2007-10-16 12:57:00
  • Javascript Worker子线程代码实例

    2024-04-17 09:46:16
  • python字典多条件排序方法实例

    2023-06-22 03:43:07
  • 保姆级官方yolov7训练自己的数据集及项目部署详解

    2023-09-16 14:19:45
  • vue中异步数据获取方式(确保数据被获取)

    2024-05-09 15:23:07
  • python+pytest接口自动化之token关联登录的实现

    2023-01-21 13:27:37
  • anaconda3安装及jupyter环境配置全教程

    2021-03-26 07:45:07
  • asp用正则过滤html标签

    2008-01-19 16:34:00
  • 一篇文章带你了解python标准库--math模块

    2021-02-22 07:35:12
  • centos 安装python3.6环境并配置虚拟环境的详细教程

    2021-06-10 12:24:49
  • asp之家 网络编程 m.aspxhome.com