JS-this关键字详解

this

this是js的关键字
他是根据执行上下文（执行环境）动态指向当前调用的对象；
谁调用，就指谁

一、全局作用域下：this始终指向window对象

二、函数作用域下：函数被谁调用，this就指向谁

三、对象中的函数作用域下：this指向该方法所属的对象

四、在构造函数中：this始终指向新对象

五、自执行函数中：this指向window

六、箭头函数中：this是在定义是绑定到了父级对象上，不是在执行过程中绑定的

注意：匿名函数的this就指向window，没有其他结果

// 1,全局this指window
console.log(this); // window
function foo() {
    console.dir(this);
}

// 2，全局函数的this也指window
foo(); // window
            
// 3,事件处理函数this指事件触发对象
document.body.onclick = foo; // body
            
// 4,对象方法里的this 指对象本身
var obj =  {foo}; // {foo: foo}
obj.foo(); // obj
            
// 4.1, 谁调用就指谁
var obj1 = {};
obj1.foo = obj.foo;

obj1.foo(); // obj1
var obj2 = {};

//5,匿名函数的this指window
(obj2.foo = obj1.foo)();  // window

(obj2.foo)();

function () {
    // this window
    obj2.foo(); // obj2
           }

js改变this指向的3种方法: call apply bind

call(thisObj, 参数1，参数2 …)

方法可以指定this 的指向（即函数执行时所在的的作用域），然后再指定的作用域中，执行函数

方法的参数，应该是对象obj,如果参数为空或null,undefind,则默认传参全局对象

第一个参数是this指向的对象，第二个及后面的是函数回调所需的入参

var person = {
    name: 'zhangsan',
    age: 20
}

function say(x, y){
    console.log(this.name)
    console.log(this.age)
    console.log(x, y)
}

say.call(person, 1, 2) 
// zhangsan
// 20
// 1 2

apply(thisObj, [参数1，参数2 …])

第一个参数也是this所要指向的那个对象，如果设为null或undefined，则等同于指定全局对象。

第二个参数则是一个数组，该数组的所有成员依次作为参数，传入原函数。在apply方法中，必须以数组形式添加。

var person = {
    name: 'zhangsan',
    age: 20
}

function say(x, y){
    console.log(this.name)
    console.log(this.age)
    console.log(x, y)
}

say.apply(person, [1, 2])
// zhangsan
// 20
// 1 2

bind(thisObj, 参数1，参数2 …)

bind 用于将函数体内的this绑定到某个对象，然后返回一个新函数

var person = {
    name: 'zhangsan',
    age: 20
}

function say(x, y){
    console.log(this.name)
    console.log(this.age)
    console.log(x, y)
}

say.bind(person, 1, 2)();
// zhangsan
// 20
// 1 2

三种方法的比较

1. call 、 apply 、bind 均能改变this 指向

2. bind 每次执行产生一个新函数，call、apply 不会

3. call ,bind 接收多个参数绑定到函数并且参数单一传入，apply 接收方式为数组