您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

Javascript this 关键字 详解_基础知识

2024/6/26 9:58:19发布36次查看
一、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所指向的对象
复制代码 代码如下:
//
$(#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());
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product