js中的this

this是什么？

this是一个指针，指向调用函数的对象。

this的绑定规则

this的绑定规则有：

1.默认绑定
2.隐式绑定
3.显示绑定
4.new绑定

1.默认绑定

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

function sayHi(){
    console.log('Hello,', this.name);
}
var name = 'Wiliam';
sayHi();

在浏览器环境中打印结果如下：

在调用sayHi()时，应用了默认绑定，this指向全局对象（非严格模式下），严格模式下，this指向undefined，undefined上没有this对象，会抛出错误。

上面的代码，如果在浏览器环境中运行，那么结果就是 Hello,Wiliam

但是如果在node环境中运行，结果就是 Hello,undefined.这是因为node中name并不是挂在全局对象上的。

2.隐式绑定

函数的调用是在某个对象上触发的.

function sayHi(){
    console.log('Hello,', this.name);
}
var person = {
    name: 'World',
    sayHi: sayHi
}
var name = 'Wiliam';
person.sayHi();

在浏览器环境中打印结果如下：

sayHi函数声明在外部，严格来说并不属于person，但是在调用sayHi时,调用位置会使用person的上下文来引用函数，隐式绑定会把函数调用中的this(即此例sayHi函数中的this)绑定到这个上下文对象（即此例中的person）

需要注意的是：对象属性链中只有最后一层会影响到调用位置。

function sayHi(){
    console.log('Hello,', this.name);
}
var person = {
    name: 'World',
    sayHi: sayHi
}
var name = 'Wiliam';
var Hi = person.sayHi;
Hi();

打印结果如下：

当写 var Hi = person.sayHi; 时，实际上是将 sayHi 函数的引用赋值给了变量 Hi。所以，Hi 和 person.sayHi 都指向同一个函数。

然而，当 this 关键字在函数内部使用时，它的值取决于函数如何被调用。在这个例子中，sayHi 函数被作为 person 对象的一个方法调用，所以 this 指向 person 对象。但是，当你通过 Hi() 调用函数时，由于没有明确的上下文，this 的值会变为全局对象（在非严格模式下）或 undefined（在严格模式下）。

因此，person.sayHi() 和 Hi() 的主要区别在于它们对 this 的处理方式不同。前者将 this 设置为 person 对象，而后者则依赖于函数调用的上下文。

我们可以多加一行代码比较结果

function sayHi(){
    console.log('Hello,', this.name);
}
var person1 = {
    name: 'World',
    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);

打印结果如下：

• 第一条输出：setTimeout作为全局函数，this使用的是默认绑定，非严格模式下，执行的是全局对象
• 第二条输出：person2.sayHi相当于赋给一个新的变量值，其运行模式与上面的Hi()；一致，使用默认绑定
• 第三条输出：默认绑定
• 第四条输出：隐式绑定

3.显式绑定

显式绑定比较好理解，就是通过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: 'World',
    sayHi: sayHi
}
var name = 'Wiliam';
var Hi = person.sayHi;
Hi.call(person);

打印结果如下：

但是特定情况会出现默认绑定

function sayHi(){
    console.log('Hello,', this.name);
}
var person = {
    name: 'World',
    sayHi: sayHi
}
var name = 'Wiliam';
var Hi = function(fn) {
    fn();
}
Hi.call(person, person.sayHi); 

这段代码中的function(fn){fn();}是一个匿名函数，它接受一个参数fn，然后立即调用这个参数。在这个例子中，Hi.call(person, person.sayHi);将person.sayHi作为参数传递给这个匿名函数，然后匿名函数立即调用person.sayHi。
与上面说Hi()的情况一致，person.sayHi被赋值给fn，即没有上下文来提供隐式绑定，最后使用的是默认绑定

如果希望绑定不会丢失，可以采用同时传递this的方法

function sayHi(){
    console.log('Hello,', this.name);
}
var person = {
    name: 'World',
    sayHi: sayHi
}
var name = 'Wiliam';
var Hi = function(fn) {
    fn.call(this);
}
Hi.call(person, person.sayHi);

打印结果：

因为person被绑定到Hi函数中的this上，fn又将这个对象绑定给了sayHi的函数。这时，sayHi中的this指向的就是person对象。

4.new绑定

函数的“构造调用”

function sayHi(name){
    this.name = name;
}
var Hi = new sayHi('World');
console.log('Hello,', Hi.name);

打印结果：

这四种绑定的优先级排序如下：

new绑定 > 显式绑定 > 隐式绑定 > 默认绑定

当传入值是null或者undefined时，使用call、apply或bind，这些传入值在调用时将被忽略，实际应用的是默认绑定规则。

var foo = {
    name: 'Selina'
}
var name = 'Chirs';
function bar() {
    console.log(this.name);
}
bar.call(null);

打印结果：

本篇用于自我学习，对某些代码加入了自己的理解，原链接。