大只彬

个人博客

欢迎来到我的个人博客~( ̄▽ ̄~)(~ ̄▽ ̄)~


关于this,你有多少了解


JavaScript的this总是指向一个对象

具体到实际应用中,this的指向又可以分为以下四种:

  1. 作为对象的方法调用

  2. 作为普通函数调用

  3. 构造器调用

  4. apply和call调用

1. 作为对象的方法调用

作为对象方法调用时,this 指向 该对象

var obj = {
 a: 1,
 getA: function() {
  console.log(this === obj);
  console.log(this.a);
 }
};
 
obj.getA(); // true , 1

2. 作为普通函数调用

作为普通函数调用时,this 总是指向 全局对象 (浏览器中是 window )。

window.name = 'globalName';
var getName = function() {
 console.log(this.name);
};
getName(); // 'globalName'
 
var myObject = {
 name: "ObjectName",
 getName: function() {
  console.log(this.name)
 }
};
myObject.getName(); // 'ObjectName'
 
// 这里实质上是把function() {console.log(this.name)}
// 这句话赋值给了theName。thisName在全局对象中调用,自然读取的是全局对象的name值
var theName = myObject.getName;
 
theName(); // 'globalName'

3. 构造器调用

作为构造器调用时,this 指向返回的 这个对象

var myClass = function() {
 this.name = "Lxxyx";
};
var obj = new myClass();
console.log(obj.name); // Lxxyx
console.log(obj) // myClass {name: "Lxxyx"}

但是如果构造函数中手动指定了 return 其它对象,那么 this将不起作用。 如果 return 别的数据类型,则没有问题。

var myClass = function() {
 this.name = "Lxxyx";
 // 加入return时,则返回的是别的对象。this不起作用。
 return {
  name:"ReturnOthers"
 }
};
var obj = new myClass();
console.log(obj.name); // ReturnOthers

4. apply和call调用

call和apply的区别

共同点是第一个参数都是this,即函数运行时依赖的上下文。

apply 方法与 call 方法类似。两者唯一的不同点在于,apply 方法使用 数组 指定参数,而 call 方法每个参数 单独 需要指定:

apply(thisArg, [argsArray])
call(thisArg, arg1, arg2, …)

如果第一个参数为 null/undefined ,则 this 指向 调用的本身。 如果第一个参数为 null/undefined ,则 this指向 window(在node环境中则指向global)

// 调用Array的原型方法
Array.prototype.push.call(arguments, 3);

函数具有 arguments 属性,而 arguments 是一个 类数组arguments 是不能直接调用数组的方法的,所以我们要用 call 或者 apply 来调用 Array 对象的原型方法。

打赏一个呗

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦