this的四种绑定规则示例

首先总结一句话,this指向什么，跟函数所处的位置是没有关系的,跟函数被调用的方式有关系

一.默认绑定

例1

function foo() {
    console.log(this); //window
};
foo();

例2

var obj = {
    name: 'lsh',
    foo: function() {
        console.log(this); // window , 调用的时候没有主题，是一个独立函数调用
    }
};

var bar = obj.foo;
bar();

例3

function foo() {
    return function() {
        console.log(this); // window
    }
}
var fn = foo();
fn();

二.隐式绑定

例1

function foo() {
    return function() {
        console.log(this); 
    }
}
var obj = {
    name: 'lsh',
    eating: fn
};

obj.eating(); // obj是调用主题，隐式绑定

例2

var obj1 = {
    foo: function() {
        console.log(this);
    }
};
var obj2 = {
    name: 'obj2',
    bar: obj1.foo  //来自于obj1,但是obj1里面的foo函数被调用的时候，是被obj2调用的，所以obj2就会自动绑定到this
    
};

obj2.bar();

三.显式绑定

foo直接调用和call/apply调用的不同在于this绑定的不同
foo直接调用指向的是全局对象(window)
call/apply是可以指定this绑定对象

call/apply区别,call/apply在执行函数时候，是可以明确的绑定this

function sum(num1, num2) {
    console.log(num1 + num2, this);
};
//传参
sum.call('call', 20, 30);
sum.apply('apply', [20, 30]);

bind

function foo() {
    console.log(this);
};

// 默认绑定和显式绑定bind冲突，优先级高(显式)
var newFoo = foo.bind('aaa');

// newFoo被永久显式绑定了aaa

四.new绑定

1.我们通过一个new关键字调用一个函数时(构造器),这个时候this是在调用这个构造器时创建出来的对象
2.this = 创建出来的对象
3.这个绑定过程就是new绑定

function Person(name, age) {
  this.name = name;
  this.age = age;
};

var p1 =  new Person('why', 18);
console.log(p1.name, p1.age);

var p2 = new Person('kobe', 30);
console.log(p2.name, p2.age);

总结: