js中对this的理解

总结

1：在浏览器中，全局声明下的this指向了window。

// 1
console.log(this === window); //true
//2
var name = "Jake";
console.log(this.name ); // "Jake"
console.log(window.name ); // "Jake"

//3
 age = 23;
 function testThis() {
   age = 18;
 }
 console.log(this.age ); // 23
 testThis();
 console.log(this.age ); // 18

2：在函数中，this永远指向最后调用它的那个对象。

var name = "windowsName";
function sayName() {
var name = "Jake";
console.log(this.name);   // windowsName
console.log(this);    // Window
}
sayName();
console.log(this) // Window

3：在构造函数中，this指向new出来的那个新对象。

var a = new Foo("zhang","jake");

new Foo{
    var obj = {};
    obj.__proto__ = Foo.prototype;
    var result = Foo.call(obj,"zhang","jake");
    return typeof result === 'obj'? result : obj;
}

4：对于call(),apply(),bind()中的this是被强行绑定到指定的对象上。

var name = 'zjk';
  function fun() {
  console.log (this.name);
}

var obj= {
  name: 'jake'
};
fun(); // zjk
fun.call(obj); //Jake

5: 箭头函数中的this，它指向的是父级作用域的this，前1-4点调用的时候确定是动态的，而箭头函数的this指向的是静态的，于是声明之时就确定下来了。

    let name = "zjk";

    let first = {
        name : "Jake",

        sayName: function () {
            console.log(this.name)     
        },

        func: function () {
            setTimeout( () => {
                this.sayName()
            },100);
        }

    };

    .func()     // Jake

6: call()、apply()、bind()都是js给函数内置的一些API,调用他们可以为函数指定this的执行，也可以传参。

call()、apply()与bind()的区别：

执行函数阐述：

1. call/apply改变了函数的this上下文后马上执行该函数；

2. bind则是返回改变了上下文后的函数,不执行该函数。

function add (a, b) {
    return a + b;
}

function sub (a, b) {
    return a - b;
}

add.bind(sub, 5, 3); // 这时，并不会返回 8
add.bind(sub, 5, 3)(); // 调用后，返回 8

返回值阐述：

1： call/apply 返回fun的执行结果；

2：bind返回fun的拷贝，并指定了fun的this指向，保存了fun的参数。