前端 | 关于this

首先this不是指向自身!this就是一个指针,指向调用函数的对象.为了可以一眼看出this指向的是什么,我们需要知道this的绑定规则有哪些?

• 默认绑定
• 隐式绑定
• 硬绑定
• new 绑定

默认绑定

在不能应用其他绑定规则时使用的默认规则,通常是独立函数调用

function sayHi() {
  console.log('hello',this.name)
}
let name = 'YvetteLau';
sayHi();   // hello YvutteLau(浏览器环境下)

在调用sayHi时,应用了默认绑定,this指向的是全局对象(非严格模式下),严格模式下指向的是undefined,undefined下没有this,会报错
上述代码,如果在浏览器环境下运行,输出的是 hello YvutteLau,但是如果实在node环境下,输出的是 hello undefinded,这是因为node中name并不是挂在全局对象下面的,下文如无特别说明,一律默认是在浏览器环境下

隐式绑定

函数的调用是在某个对象上触发的,即调用位置存在上下文关系.典型的形式为 xxx.func()

function sayHi() {
  console.log('hello',this.name)
}

let person = {
  name:'YvutteLau',
  sayHi:sayHi
}
person.sayHi();   // hello YvutteLau

sayHi函数声明在外部,严格来说并不属于person,但是在调用sayHi时,会使用person的上下文来引用函数,隐式绑定会把函数中的this绑定到这个上下文对象(即person对象)
需要注意的是,对象属性链中只有最后一层会影响到this的调用关系

function sayHi() {
  console.log('hello', this.name)
}
let person1 = {
  name:'Christina',
  sayHi:sayHi
}
let person2 = {
  name:'YvutteLau',
  friend:person1
}
person2.friend.sayHi();  // hello, Christina

不管有多少层,在判断this的时候,我们只关注最后一层,因为只有最后一层才能决定this指向的是什么

隐式绑定有一个很大的缺陷,绑定很容易丢失

function sayHi() {
  console.log('hello',this.name);
}
var person = {
  name:'Christina',
  sayHi:sayHi
}
var name = 'Wiliam';
var hi = person.sayHi();
hi(); // hello,Wiliam;

除了上面这种丢失之外,隐式绑定的丢失发生在回调函数中,事件回调也是其中一种(原谅我理解不了)

function sayHi(){
    console.log('Hello,', this.name);
}
var person1 = {
    name: 'YvetteLau',
    sayHi: function(){
        setTimeout(function(){
            console.log('Hello,',this.name);
        })
    }
}
var person2 = {
    name: 'Christina',
    sayHi: sayHi
}
var name='Wiliam';
person1.sayHi();
setTimeout(person2.sayHi,100);
setTimeout(function(){
    person2.sayHi();
},200);

显示绑定

显示绑定比较好理解,就是通过call,apply,bind的方式,显示的绑定this所指向的对象(《你不知道的JavaScript》中将bind单独作为硬绑定讲解了)

call,apply,bind的第一个参数,就是对应函数的this所指向的对象.call和apply的作用一样,只是传参方式不一样.call和apply都会执行对应的函数,而bind不会

function sayHi() {
  console.log('hello',this.name);
}
var person = {
  name:'Christina',
  sayHi:sayHi
}
var name = 'Wiliam';
var hi = person.sayHi;
hi.call(person);

原文摘自 嗨,你不知道的this 还有简书