this关键字

2022-02-18 本文已影响0人 darkTi

记住，对于function函数，this就是call的第一个参数！！！

箭头函数的this定义：箭头函数的this是在定义函数时绑定的，而不是在执行过程中绑定的！！！
人话：箭头函数没有this，箭头函数里出现this的话，你就把它当做普通变量，看外面有没有定义，注意啦！所以也可以说，如果箭头函数里出现了this，那么这个this的值就是声明箭头函数时定义的this的值，且后面一直会是这个值，不会改变！！！

普通函数的this定义：基于函数的执行环境绑定的！！！
人话：谁调用我谁就是我的this；

一、分析下面的代码

第一个

var a = {
  name: "里面的name",
  sayName: function () {
    console.log("this.name = " + this.name);
  },
};
var name = "外面的name";
function sayName() {
  var sss = a.sayName;
  sss(); //this.name = ?
  a.sayName(); //this.name = ?
  (a.sayName)(); //this.name = ?
  (b = a.sayName)(); //this.name = ?
}
sayName();

1、首先遇到调用，一定先变成call()的形式！！！

sayName() >> sayName.call(null)，this为window；
sss() >> sss.call(null)，this为window；
a.sayName() >> a.sayName.call(a)，this为对象a，如果是对象后面接一个函数，那么call的第一个参数就是这个对象；
(a.sayName)() >> a.sayName.call(a)，this为对象a，注意啦！！在js中，你加不加括号都是一样的！！！
(b = a.sayName)() >> b.call(null)，this为window，这个就相当于上面那个sss，先给b赋值，再调用b；

第二个

var length = 10;
function fn() {
  console.log(this.length);
}
var obj = {
  length: 5,
  method: function (fn) {
    fn();
    arguments[0]();
  },
};
obj.method(fn, 1);

2、还是需要先改写成call()的形式！！！

obj.method(fn, 1) >> obj.method.call(obj,fn, 1)，this是对象obj，arguments是参数组成的数组[fn, 1]；
再往里看method函数，fn() >> fn.call(null)，this为window；所以第一个打印出10；
arguments[0]() >> arguments.0.call(arguments)，this为arguments，arguments的长度为2，所以打印出2；

二、定时器中的this

1、如果没有特殊指向，setInterval和setTimeout的回调函数中this的指向都是window。这是因为JS的定时器方法是定义在window下的。
2、看下面的代码，因为两个setTimeout都是在window下调用的，所以它们回调函数里面的this都是window，第一个setTimeout里的回调函数是add函数，它里面的this指向window，所以改动的就不是fn里的num，第二个setTimeout打印fn.num时，那肯定还是1啦~~~

function Fn (){
  console.log(this, 'this111')
  this.num = 1
  this.add = function (){
    console.log(this, 'this222')
    this.num++ 
  }
}
const fn = new Fn()
setTimeout(fn.add,1000)
setTimeout(function(){
  console.log(this, 'this333')
  console.log(fn.num, 'num')
},2000)

image.png

3、改一下上面第一个setTimeout里的回调函数，把里面的this指向fn了

function Fn (){
  console.log(this, 'this111')
  this.num = 1
  this.add = function (){
    console.log(this, 'this222')
    this.num++ 
  }
}
const fn = new Fn()
setTimeout(fn.add.bind(fn),1000)
setTimeout(function(){
  console.log(this, 'this333')
  console.log(fn.num, 'num')
},2000)

image.png

4、再看一组

这就需要了解箭头函数的this指向和普通函数的this指向；
箭头函数的this定义：箭头函数的this是在定义函数时绑定的，而不是在执行过程中绑定的！！！
人话：箭头函数没有this，箭头函数里出现this的话，你就把它当做普通变量，看外面有没有定义，注意啦！所以也可以说，如果箭头函数里出现了this，那么这个this的值就是声明箭头函数时定义的this的值，且后面一直会是这个值，不会改变！！！
普通函数的this定义：基于函数的执行环境绑定的！！！
人话：谁调用我谁就是我的this；
所以下面第一组代码中的setTimeout(fn.y, 1000)，虽然setTimeout的this是window，但是fn.y是箭头函数，它的this只需要看它定义时绑定的对象，那就是Fn函数；

function Fn(){
  this.x = function(){
    console.log(this, 'thisxxx')
  }
  this.y = ()=>{
    console.log(this, 'thisyyy')
  }
}
const fn = new Fn()

fn.x()
fn.y()

setTimeout(fn.x, 1000)
setTimeout(fn.y, 1000)

image.png

var obj = {
  x: function(){
    console.log(this, 'thisxxx')
  },
  y: ()=>{
    console.log(this, 'thisyyy')
  }
}

obj.x()
obj.y()
setTimeout(obj.x, 1000)
setTimeout(obj.y, 1000)

image.png

三、绑定this的方法

this的动态切换，固然为 JavaScript 创造了巨大的灵活性，但也使得编程变得困难和模糊。有时，需要把this固定下来，避免出现意想不到的情况。JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向。

Function.prototype.call()

call方法的参数，应该是一个对象。第一个参数是this，如果第一个参数为空、null和undefined，则默认传入全局对象。

var n = 123;
var obj = { n: 456 };
function a() {
  console.log(this.n);
}
a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(window) // 123
a.call(obj) // 456

Function.prototype.bind()

bind方法用于将函数体内的this绑定到某个对象，然后返回一个绑定了这个对象的新函数。

var d = new Date();
d.getTime() // 1481869925657

var print = d.getTime;
print() // Uncaught TypeError: this is not a Date object.

上面代码中，我们将d.getTime方法赋给变量print，然后调用print就报错了。这是因为getTime方法内部的this，绑定Date对象的实例，赋给变量print以后，内部的this已经不指向Date对象的实例了。
bind方法可以解决这个问题;

var print = d.getTime.bind(d);
print() // 1481869925657

四、参考下面三篇文章

1、this的值到底是什么？https://zhuanlan.zhihu.com/p/23804247
2、如何确定this；https://zhuanlan.zhihu.com/p/25991271
3、JS里为什么要有this；https://zhuanlan.zhihu.com/p/30164164

this关键字

一、分析下面的代码

第一个

第二个

二、定时器中的this

三、绑定this的方法

四、参考下面三篇文章

猜你喜欢

热点阅读