分分钟掌握this关键字的指向

1.this的值取决于函数被调用的方式 正常调用指向window 谁调用就指向谁

var objData = {a: 'custom'};

// 这个属性是在global对象定义的
var a = 'global';

function whatsThis() {
    return this.a; // this的值取决于函数的调用方式
}
whatsThis(); // 输出 "global"

2.使用call apply方法可以强制改变this指向

let objData = {a: 'custom'};

// 这个属性是在global对象定义的
let a = 'global';

function whatsThis () {
    return this.a
}
whatsThis.call(objData); // 输出 "custom"

3.ES5中加了 bind 函数名.bind() 将会创建一个与该函数体相同的新函数 这个新函数 不论在哪里调用 this的指向都会指向bind的第一个参数 被永久绑定 这个新的函数体只会被绑定一次

function whatsThis () {
    return this.a;
}
let pointThis = whatsThis.bind({a: 'point'});
pointThis(); // 输出 point

let bindThis = pointThis.bind({a: 'bind'});

bindThis(); // 输出 point

let againBind = whatsThis.bind({a: 'again'});
againBind(); // 输出 again

4.箭头函数内的this 一旦被调用 就永久指向 无法修改 如果只是引用 没有调用 那么调用箭头函数后，this指向window

var a = '全局a';
let foo = (() => this.a);
foo(); // 全局a

let a = '全局a';
let foo = (() => this.a);
foo(); // undefined

let objData = {
    a: 'objData中的a',
    foo:foo
}
objData.foo(); // 全局a

let secondData = {a: 'secondData中的a'}
objData.foo.call(secondData); // 全局a

objData.foo.bind({a: 'bind中的a'});
objData.foo() // 全局a

5.如果一个构造函数具有返回对象的return语句和绑定this的对象 则结果是返回的return 否则 是this 2个都有 返回return 没有return 只有this 则返回this

function foo() {
    this.a = 'foo'
}
let secondFoo = new foo();

secondFoo.a // foo

function foo() {
    this.a = 'foo'
    return {a: 'foo中的第二个a'}
}
let secondFoo = new foo();

secondFoo.a // foo中的第二个a

6.whatsThis中的this分别指向obj和全局  之所以输出内容是whatsThis中的a 因为就近先查找到了a的值

var obj = {a: 'custom'};
var a = 'global';
function whatsThis () {
this.a = 'whatsThis中的a';
return this.a;
}
whatsThis.call(obj); // 输出 whatsThis中的a

var obj = {a: 'custom'};
var a = 'global';
function whatsThis () {
this.a = 'whatsThis中的a';
return this.a;
}
whatsThis(); // 输出 whatsThis中的a

7.在严格模式下，如果 this 没有被执行环境定义，那它将保持为 undefined

function whatsThis() {
    "use strict"; // 这里是严格模式
      return this;
}

whatsThis(); // undefined

function whatsThis() {
    return this;
}

whatsThis(); // Window