程序媛小琦(对于this的认识)

this

1.默认绑定

(有this,前面没有任何元素)不带任何修饰的函数进行调用的，只能采用默认绑定，this指向window

function foo () {
    console.log(this);	//window
    console.log(this.a);
}
var a = 12;
foo();  //12

思考
var a = 12;
function test() {
    this.a = 13; //重新付了一个值 a=13
}
test();
console.log(a);	//? 13

2.隐式绑定

对象内部包含一个指向函数的属性，并通过这个属性间接引用这个函数，从而把this间接（隐式）绑定到这个对象上

//1.
function foo() {
    console.log(this);	//{a: 2, foo: ƒ}
    console.log(this.a);//2
}
var obj = {
    a: 2,
    foo: foo
}
obj.foo();
//2.
function foo() {
    console.log(this.a);
}
var obj2 = {
    a: 1,
    foo: foo
}
var obj1 = {
    a: 2,
    obj2: obj2
}
obj1.obj2.foo();    //1
var obj3 = {
    a: 3,
    obj1: obj1
}
obj3.obj1.obj2.foo(); //1

3.显示绑定

call,apply,bind都属于显式绑定一类，显示绑定后this便无法再修改

function foo() {
    console.log(this);	//{a: 2}
    console.log(this.a);  //2
}
var obj = {
    a: 2
}
foo.call(obj);

function foo() {
    console.log(this);	//{a: 2}
    console.log(this.a);  //2
}
var obj = {
    a: 2
}
foo.apply(obj);

function foo() {
    console.log(this);	//{a: 2}
    console.log(this.a);	//2
}
var obj = {
    a: 2
}
var f = foo.bind(obj);
f();

4.new绑定

实例化一个新对象后，会将实例对象绑定到函数调用中的this上。
绑定优先级：new绑定>显示绑定>隐式绑定>默认绑定

function foo(a) {
    console.log(this);
    this.a = a;
    console.log(this.a); //2
}
var bar = new foo(2);
console.log(bar.a); //2

5.箭头函数

es6新增的()=>箭头函数

//1.外层有函数：外层函数的`this`就是箭头函数的`this`
var obj = {
    a: 1,
    foo() {
        //this===obj
        var fn = () => {
            //this===obj
            console.log(this.a);
            //this.a===1
        };
        fn();
    }
}
obj.foo();  //1

//2.外层没有函数：箭头函数的`this`就是`window`
var a = 123;
var obj = {
    a: 1,
    //this===window
    foo: () => {
        console.log(this.a); //window.a=123
    }
}
obj.foo();  //123