关于前端:一文读懂Js中的this指向

this关键字是一个十分重要的语法点。毫不夸大地说，不了解它的含意，大部分开发工作都无奈实现。

简略说，this就是属性或办法“以后”所在的对象。

this.property

下面代码中，this就代表 property 属性以后所在的对象。

上面是一个理论的例子。

var person = {
  name: '张三',
  describe: function () {return '姓名：'+ this.name;}
};

person.describe()
// "姓名：张三"

下面代码中，this.name示意 name 属性所在的那个对象。因为 this.name 是在 describe 办法中调用，而 describe 办法所在的以后对象是 person，因而this 指向 person，this.name 就是person.name。

因为对象的属性能够赋给另一个对象，所以属性所在的以后对象是可变的，即 this 的指向是可变的。

var A = {
  name: '张三',
  describe: function () {return '姓名：'+ this.name;}
};

var B = {name: '李四'};

B.describe = A.describe;
B.describe() // "姓名：李四"

下面代码中，A.describe属性被赋给 B，于是B.describe 就示意 describe 办法所在的以后对象是 B，所以this.name 就指向B.name。

只有函数被赋给另一个变量，this的指向就会变。

var A = {
  name: '张三',
  describe: function () {return '姓名：'+ this.name;}
};

var name = '李四';
var f = A.describe;
f() // "姓名：李四"

下面代码中，A.describe被赋值给变量 f，外部的this 就会指向 f 运行时所在的对象（本例是顶层对象，在浏览器中就是 window），因而 name 为全局 name 的值。

JavaScript 语言之所以有 this 的设计，跟内存外面的数据结构有关系。

var obj = {foo:  5};

下面的代码将一个对象赋值给变量 obj。JavaScript 引擎会先在内存外面，生成一个对象{foo: 5}，而后把这个对象的 内存地址 赋值给变量 obj。也就是说，变量obj 是一个地址（reference）。前面如果要读取obj.foo，引擎先从obj 拿到 内存地址 ，而后再从该地址读出 原始的对象 ，返回它的foo 属性。

原始的对象以 字典构造 保留，每一个 属性名 都对应一个 属性形容对象 。举例来说，下面例子的foo 属性，实际上是以上面的模式保留的。

{
  foo: {[[value]]: 5
    [[writable]]: true
    [[enumerable]]: true
    [[configurable]]: true
  }
}

留神，foo属性的值保留在属性形容对象的 value 属性外面。

这样的构造是很清晰的，问题在于属性的值可能是一个函数。

var obj = {foo: function () {}};

这时，引擎会将函数 独自保留在内存中 ，而后再将 函数的地址 赋值给 foo 属性的 value 属性。

{
  foo: {[[value]]: 函数的地址
    ...
  }
}

因为函数是一个独自的值，所以它能够在不同的环境（上下文）执行。

var f = function () {};
var obj = {f: f};

f() // 独自执行

obj.f() // obj 环境执行

JavaScript 容许在函数体外部，援用以后环境的其余变量。

var f = function () {console.log(x);
};

下面代码中，函数体外面应用了变量x。该变量由运行环境提供。

当初问题就来了，因为函数能够在不同的 运行环境 执行，所以须要有一种机制，可能在函数体外部取得 以后的运行环境 （context）。所以，this 就呈现了，它的设计目标就是在函数体外部，指代函数以后的 运行环境。

var f = function () {console.log(this.x);
}

下面代码中，函数体外面的 this.x 就是指以后运行环境的x。this 就是指代以后运行在什么环境。

var f = function () {console.log(this.x);
}

var x = 1;
var obj = {
  f: f,
  x: 2,
};

// 独自执行
f() // 1

// obj 环境执行
obj.f() // 2

下面代码中，函数 f 在全局环境执行，this.x指向全局环境的 x；在obj 环境执行，this.x指向obj.x。

this次要有以下几个应用场合。

在浏览器全局环境下，this 始终指向全局对象（window）, 无论是否严格模式；

this === window // true

一般函数，非严格模式 下，指向 window。 严格模式 下，指向 undefined。

参考前端进阶面试题具体解答

function f() {console.log(this === window);
}
f() // true

function f() {
    'use strict';
    console.log(this === undefined);
}
f() // true

构造函数中的this，指的是实例对象。

var Obj = function (p) {this.p = p;};

下面代码定义了一个构造函数 Obj。因为this 指向实例对象，所以在构造函数外部定义 this.p，就相当于定义实例对象有一个p 属性。

var o = new Obj('Hello World!');
o.p // "Hello World!"

如果对象的办法外面蕴含 this，this 的指向就是办法运行时所在的对象。该办法赋值给另一个对象，就会扭转 this 的指向。

然而，这条规定很不容易把握。请看上面的代码。

var obj ={foo: function () {console.log(this);
  }
};

obj.foo() // obj

下面代码中，obj.foo办法执行时，它外部的 this 指向obj。

然而，上面这几种用法，都会扭转 this 的指向。

// 状况一
(obj.foo = obj.foo)() // window
// 状况二
(false || obj.foo)() // window
// 状况三
(1, obj.foo)() // window

下面代码中，obj.foo就是一个值。这个值真正调用的时候，运行环境曾经不是 obj 了，而是全局环境，所以 this 不再指向obj。

能够这样了解，JavaScript 引擎外部，obj和 obj.foo 贮存在两个内存地址，称为 地址一 和地址二。

obj.foo()这样调用时，是从 地址一 调用 地址二 ，因而 地址二 的运行环境是 地址一 ，this 指向obj。

然而，下面三种状况，都是 间接取出地址二 进行调用，这样的话，运行环境就是 全局环境 ，因而this 指向全局环境。下面三种状况等同于上面的代码：

// 状况一
(obj.foo = function () {console.log(this);
})()
// 等同于
(function () {console.log(this);
})()

// 状况二
(false || function () {console.log(this);
})()

// 状况三
(1, function () {console.log(this);
})()

如果 this 所在的办法不在对象的第一层，这时 this 只是指向以后一层的对象，而不会继承更下面的层。

var a = {
  p: 'Hello',
  b: {m: function() {console.log(this.p);
    }
  }
};

a.b.m() // undefined

下面代码中，a.b.m办法在 a 对象的第二层，该办法外部的 this 不是指向a，而是指向a.b，因为理论执行的是上面的代码。

var b = {m: function() {console.log(this.p);
  }
};

var a = {
  p: 'Hello',
  b: b
};

(a.b).m() // 等同于 b.m()

数组的 map 和foreach办法，容许提供一个函数作为参数。这个函数外部不应该应用this。

var o = {
  v: 'hello',
  p: ['a1', 'a2'],
  f: function f() {this.p.forEach(function (item) {console.log(this.v + ' ' + item);
    });
  }
}

o.f()
// undefined a1
// undefined a2

下面代码中，foreach办法的回调函数中的 this，其实是指向window 对象，因而取不到 o.v 的值。起因跟上一段的多层 this 是一样的，就是内层的 this 不指向内部，而指向顶层对象。

解决这个问题的一种办法，就是后面提到的，应用两头变量固定this。

var o = {
  v: 'hello',
  p: ['a1', 'a2'],
  f: function f() {
    var that = this;
    this.p.forEach(function (item) {console.log(that.v+' '+item);
    });
  }
}

o.f()
// hello a1
// hello a2

另一种办法是将 this 当作 foreach 办法的第二个参数，固定它的运行环境。

var o = {
  v: 'hello',
  p: ['a1', 'a2'],
  f: function f() {this.p.forEach(function (item) {console.log(this.v + ' ' + item);
    }, this);
  }
}

o.f()
// hello a1
// hello a2

或者应用 es6 的箭头函数。

var o = {
  v: 'hello',
  p: ['a1', 'a2'],
  f: function f() {this.p.forEach((item)=>{console.log(this.v + ' ' + item);
    });
  }
}

o.f()
// hello a1
// hello a2

原型链中的办法的 this 依然指向调用它的对象

var o = {f : function(){return this.a + this.b;}
};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5

以上代码，能够看出，在 p 中没有属性 f，当执行 p.f()时，会查找 p 的原型链，找到 f 函数并执行，但这与函数外部 this 指向对象 p 没有任何关系，只需记住谁调用指向谁。

事件处理函数外部的 this 指向触发这个事件的对象

var oBox = document.getElementById('box');
oBox.onclick = function () {console.log(this)   //oBox
}

对于延时函数外部的回调函数的 this 指向全局对象 window（当然咱们能够通过 bind 办法扭转其外部函数的 this 指向）

// 默认状况下代码
function Person() {  
    this.age = 0;  
    setTimeout(function() {console.log(this);
    }, 3000);
}

var p = new Person();// 3 秒后返回 window 对象
==============================================
// 通过 bind 绑定
function Person() {  
    this.age = 0;  
    setTimeout((function() {console.log(this);
    }).bind(this), 3000);
}

var p = new Person();// 3 秒后返回构造函数新生成的对象 Person{...}

因为箭头函数不绑定 this，它会捕捉其所在（即定义的地位）上下文的 this 值，作为本人的 this 值，

所以 call() / apply() / bind() 办法对于箭头函数来说只是传入参数，对它的 this 毫无影响。
思考到 this 是词法层面上的，严格模式中与 this 相干的规定都将被疏忽。（能够疏忽是否在严格模式下的影响）

function Person() {setInterval(() => {console.log(this)    //Person
    }, 3000);
}

var p = new Person();

以上 this 指向 Person

let a = ()=> {console.log(this)
}
a()

以上代码 this 指向 window

this的动静切换，诚然为 JavaScript 发明了微小的灵活性，但也使得编程变得艰难和含糊。有时，须要把 this 固定下来，避免出现意想不到的状况。JavaScript 提供了 call、apply、bind 这三个办法，来切换 / 固定 this 的指向。以下是绑定 this 的办法。

函数实例的 call 办法，能够指定函数外部 this 的指向（即函数执行时所在的作用域），而后在所指定的作用域中，调用该函数。

var obj = {};

var f = function () {return this;};

f() === window // true
f.call(obj) === obj // true

下面代码中，全局环境运行函数 f 时，this指向全局环境（浏览器为 window 对象）；call办法能够扭转 this 的指向，指定 this 指向对象 obj，而后在对象obj 的作用域中运行函数f。

call办法的参数，应该是一个对象。如果参数为空、null和undefined，则默认传入全局对象。

var n = 123;
var obj = {n: 456};

function a() {console.log(this.n);
}

a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(window) // 123
a.call(obj) // 456

下面代码中，a函数中的 this 关键字，如果指向全局对象，返回后果为 123。如果应用call 办法将 this 关键字指向 obj 对象，返回后果为 456。能够看到，如果call 办法没有参数，或者参数为 null 或undefined，则等同于指向全局对象。

留神：如果是严格模式或者 vue(vue 默认严格模式)中，传入 null 则指向 null，传入 window 则指向 window

如果 call 办法的参数是一个原始值，那么这个原始值会主动转成对应的包装对象，而后传入 call 办法。

var f = function () {return this;};

f.call(5)
// Number {[[PrimitiveValue]]: 5}

下面代码中，call的参数为 5，不是对象，会被主动转成包装对象（Number 的实例），绑定 f 外部的this。

call办法还能够承受多个参数。

func.call(thisValue, arg1, arg2, ...)

call的第一个参数就是 this 所要指向的那个对象，前面的参数则是函数调用时所需的参数。

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

add.call(this, 1, 2) // 3

下面代码中，call办法指定函数 add 外部的 this 绑定以后环境（对象），并且参数为 1 和2，因而函数 add 运行后失去3。

call办法的一个利用是调用对象的原生办法。

var obj = {};
obj.hasOwnProperty('toString') // false

// 笼罩掉继承的 hasOwnProperty 办法
obj.hasOwnProperty = function () {return true;};
obj.hasOwnProperty('toString') // true

Object.prototype.hasOwnProperty.call(obj, 'toString') // false

下面代码中，通过 obj 对象继承 Object 的hasOwnProperty办法判断 obj 对象本身是没有 toString这个办法的，hasOwnProperty是 obj 对象继承的办法，如果这个办法一旦被笼罩（这里的笼罩并不是笼罩了 Object 原型上的办法，而是在 obj 创立了与原型一样的办法，执行的时候优先调用本身的办法），就不会失去正确后果。call办法能够解决这个问题，它将 hasOwnProperty 办法的原始定义放到 obj 对象上执行，这样无论 obj 上有没有同名办法，都不会影响后果。

实现思路：

扭转 this 指向：能够将指标函数作为这个对象的属性

利用 arguments 类数组对象实现参数不定长

不能减少对象的属性，所以在结尾须要 delete

以下是手动实现形式：

/***@desc 形容 *@param object [Object] 须要指向的对象 */
Function.prototype.myCall = function (object) {
    let obj = object || window;    // 如果没有传 this 参数，this 将指向 window
    var fn = Symbol();       //  Symbol 属性来确定 fn 惟一
    obj[fn] = this;                // 这里的 this 指向调用 myCall 的函数（代指 a 函数），同时将 a 函数的援用赋值给 obj 的 fn 属性。此时，当 a 函数调用的时候就是指向 obj 的了
    let arg = [...arguments].slice(1);    // 获取第二个及前面的所有参数(arg 是一个数组)
    let result = obj[fn](...arg); // a 函数的援用调用，指向 obj，也就是传入的对象
    delete obj[fn] // 不能减少 obj 的属性，所以要删除
    return result // 如果 a 函数有返回值这里就有返回值，如果 a 函数没有返回值，同样的这里也没有
}

以上代码：

当 myCall 没有传参的时候，做兼容，指向 window。

myCall 函数中 this 指向调用者，也就是执行 myCall 的函数，这里称之为 a 函数。

将 a 函数的援用赋值给 obj.fn，等同于 a 函数执行的时候，外部的 this 指向 obj。这里就实现了 this 的绑定。

将 a 参数应用 arguments 通过 slice 取出，当然，a 函数的参数是从第二位开始，因而是 slice(1)

执行 obj.fn 等同于执行 a 函数，返回后果也等同于 a 函数的返回后果，如果 a 函数有返回值，则 result 有值，反之则没有。

以下是执行后果：

function a(c) {console.log('aaa', this.a + this.b + c);
}
const obj = {
    a: 1,
    b: 2
}
a.myCall(obj, 1) // 打印 4

myCall扭转了 a 函数内的指向，指向 obj，x 相当于 obj 是a的实例，即 obj 调用 a，a.myCall(obj, 1)等价于 obj.a(1) 因而打印 1+2+1=4。

apply办法的作用与 call 办法相似，也是扭转 this 指向，而后再调用该函数。惟一的区别就是，它接管一个数组作为函数执行时的参数，应用格局如下。

func.apply(thisValue, [arg1, arg2, ...])

apply办法的第一个参数也是 this 所要指向的那个对象，如果设为 null 或undefined，则等同于指定全局对象。第二个参数则是一个数组，该数组的所有成员顺次作为参数，传入原函数。原函数的参数，在 call 办法中必须一个个增加，然而在 apply 办法中，必须以数组模式增加。

function f(x, y){console.log(x + y);
}

f.call(null, 1, 1) // 2
f.apply(null, [1, 1]) // 2

下面代码中，f函数原本承受两个参数，应用 apply 办法当前，就变成能够承受一个数组作为参数。

利用这一点，能够做一些乏味的利用。

将数组的空元素变为`undefined`

通过 apply 办法，利用 Array 构造函数将数组的空元素变成undefined。

Array.apply(null, ['a', ,'b']) // ['a', undefined, 'b']

空元素与 undefined 的差异在于，数组的 forEach 办法会跳过空元素，然而不会跳过undefined。因而，遍历外部元素的时候，会失去不同的后果。

当然，es6 能够应用扩大运算符实现。

const arr = ['a',,'b'];
[...arr] // 'a',undefined,'b'

另外，利用数组对象的 slice 办法，能够将一个相似数组的对象（比方 arguments 对象）转为真正的数组。

Array.prototype.slice.apply({0: 1, length: 1}) // [1]
Array.prototype.slice.apply({0: 1}) // []
Array.prototype.slice.apply({0: 1, length: 2}) // [1, undefined]
Array.prototype.slice.apply({length: 1}) // [undefined]

下面代码的 apply 办法的参数都是对象，然而返回后果都是数组，这就起到了将对象转成数组的目标。从下面代码能够看到，这个办法起作用的前提是，被解决的对象必须有 length 属性，以及绝对应的数字键。

其实 call 和 applay 之间的差异就是前面的传参

/***@desc 形容 *@param object [Object] 须要指向的对象 */
Function.prototype.myCall = function (object) {
    let obj = object || window;    // 如果没有传 this 参数，this 将指向 window
    var fn = Symbol();       //  Symbol 属性来确定 fn 惟一
    obj[fn] = this;                // 这里的 this 指向调用 myCall 的函数（代指 a 函数），同时将 a 函数的援用
    let arg = [...arguments].slice(1);    // 获取第二个及前面的所有参数(arg 是一个数组)
    let result = obj[fn](arg); // a 函数的援用调用，指向 obj，也就是传入的对象，这里间接传一个数组
    delete obj[fn] // 不能减少 obj 的属性，所以要删除
    return result // 如果 a 函数有返回值这里就有返回值，如果 a 函数没有返回值，同样的这里也没有
}

和 call 的区别就在于，以下代码传一个数组

let result = obj.fn(arg);

bind()办法用于将函数体内的 this 绑定到某个对象，而后返回一个新函数。

var d = new Date();
d.getTime() // 1481869925657

var print = d.getTime;
print() // Uncaught TypeError: this is not a Date object.

下面代码中，咱们将 d.getTime() 办法赋给变量 print，而后调用print() 就报错了。这是因为 getTime() 办法外部的 this，绑定Date 对象的实例，赋给变量 print 当前，外部的 this 曾经不指向 Date 对象的实例了。

bind()办法能够解决这个问题。

var print = d.getTime.bind(d);
print() // 1481869925657

下面代码中，bind()办法将 getTime() 办法外部的 this 绑定到 d 对象，这时就能够平安地将这个办法赋值给其余变量了。

bind办法的参数就是所要绑定 this 的对象，上面是一个更清晰的例子。

var counter = {
  count: 0,
  inc: function () {this.count++;}
};

var func = counter.inc.bind(counter);
func();
counter.count // 1

下面代码中，counter.inc()办法被赋值给变量 func。这时必须用bind() 办法将 inc() 外部的this，绑定到counter，否则就会出错。

bind()还能够承受更多的参数，将这些参数绑定原函数的参数。

var add = function (x, y) {return x * this.m + y * this.n;}

var obj = {
  m: 2,
  n: 2
};

var newAdd = add.bind(obj, 5); // 将 5 传给 x
newAdd(5) // 20 将 5 传给 y

下面代码中，bind()办法除了绑定 this 对象，还将 add() 函数的第一个参数 x 绑定成 5，而后返回一个新函数newAdd()，这个函数只有再承受一个参数y 就能运行了。

留神：如果 bind() 办法的第一个参数是 null 或undefined，等于将 this 绑定到全局对象，函数运行时 this 指向顶层对象（浏览器为window）。

bind()办法有一些应用留神点。

bind()办法每运行一次，就返回一个新函数，这会产生一些问题。比方，监听事件的时候，不能写成上面这样。

element.addEventListener('click', o.m.bind(o));

下面代码中，click事件绑定 bind() 办法生成的一个匿名函数。这样会导致无奈勾销绑定，所以上面的代码是有效的。

element.removeEventListener('click', o.m.bind(o));

正确的办法是写成上面这样：

var listener = o.m.bind(o);
element.addEventListener('click', listener);
//  ...
element.removeEventListener('click', listener);

回调函数是 JavaScript 最罕用的模式之一，然而一个常见的谬误是，将蕴含 this 的办法间接当作回调函数。解决办法就是应用 bind() 办法，将 counter.inc() 绑定counter。

var counter = {
  count: 0,
  inc: function () {
    'use strict';
    this.count++;
  }
};

function callIt(callback) {callback();
}

callIt(counter.inc.bind(counter));
counter.count // 1

下面代码中，callIt()办法会调用回调函数。这时如果间接把 counter.inc 传入，调用时 counter.inc() 外部的 this 就会指向全局对象。应用 bind() 办法将 counter.inc 绑定 counter 当前，就不会有这个问题，this总是指向counter。

还有一种状况比拟荫蔽，就是某些数组办法能够承受一个函数当作参数。这些函数外部的 this 指向，很可能也会出错。

var obj = {
  name: '张三',
  times: [1, 2, 3],
  print: function () {this.times.forEach(function (n) {console.log(this.name);
    });
  }
};

obj.print()
// 没有任何输入

下面代码中，obj.print外部 this.times 的this是指向 obj 的，这个没有问题。然而，forEach()办法的回调函数外部的 this.name 却是指向全局对象，导致没有方法取到值

解决这个问题，也是通过 bind() 办法绑定this。

obj.print = function () {this.times.forEach(function (n) {console.log(this.name);
  }.bind(this));
};

obj.print()
// 张三
// 张三
// 张三

联合 `call()` 办法应用

利用 bind() 办法，能够改写一些 JavaScript 原生办法的应用模式，以数组的 slice() 办法为例。

[1, 2, 3].slice(0, 1) // [1]
// 等同于
Array.prototype.slice.call([1, 2, 3], 0, 1) // [1]

下面的代码中，数组的 slice 办法从 [1, 2, 3] 外面，依照指定的开始地位和完结地位，切分出另一个数组。这样做的实质是在 [1, 2, 3] 下面调用 Array.prototype.slice() 办法，因而能够用 call 办法表白这个过程，失去同样的后果。

call()办法本质上是调用 Function.prototype.call() 办法，因而下面的表达式能够用 bind() 办法改写。

var slice = Function.prototype.call.bind(Array.prototype.slice);
slice([1, 2, 3], 0, 1) // [1]

下面代码的含意就是:

call 办法是 Function 原型上的办法，而 slice 也是办法。因而，通过 bind 扭转 call 的指向，指向 slice，slice 就相当于 Function 的实例，call是 slice 实例下的一个办法，也就是将 slice 变成 call 办法所在的对象。当 call 执行的时候，其实就等同于 slice 调用了 call 办法 Array.prototype.slice.call。

相似的写法还能够用于其余数组办法。

var push = Function.prototype.call.bind(Array.prototype.push);
var pop = Function.prototype.call.bind(Array.prototype.pop);

var a = [1 ,2 ,3];
push(a, 4)
a // [1, 2, 3, 4]

pop(a)
a // [1, 2, 3]

如果再进一步，将 Function.prototype.call 办法绑定到 Function.prototype.bind 对象，就意味着 bind 的调用模式也能够被改写。

function f() {console.log(this.v);
}

var o = {v: 123};
var bind = Function.prototype.call.bind(Function.prototype.bind);
bind(f, o)() // 123

下面代码的含意就是：

通过 bind 扭转 call 的指向，指向 bind。也就是bind 成为了 call 的实例，相当于 bind 调用 call。因而，返回Function.prototype.bind.call 函数。

bind(f,o) 的含意是：调用 Function.prototype.bind.call 函数，第一个参数 是扭转 bind 指向，指向 f。 第二个参数 是bind的参数。也就是 f 调用了 bind 函数，后果返回一个指向 o 的f函数。

而后再加括号执行 bind(f,o)()，就等于执行了指向o 的f函数。最初打印后果的 this 指向o，因而打印出123。

同 call 和 applay 不同的是，bind 返回一个函数

/**      *@desc 形容      *@param object [Object] 须要指向的对象      */
Function.prototype.myBind = function (object) {
    let obj = object || window;    // 如果没有传 this 参数，this 将指向 window
    var fn = Symbol();       //  Symbol 属性来确定 fn 惟一
    obj[fn] = this;                // 这里的 this 指向调用 myCall 的函数（代指 a 函数），同时将 a 函数的援用
    let arg = [...arguments].slice(1);    // 获取第二个及前面的所有参数(arg 是一个数组)
    /* 返回一个函数，函数外部执行调用的 a 函数，并传入参数 */
    const fBind = function () {
        /* 如果以后函数执行中的 this 是 fBound 的实例，阐明是 fBind 被 new 了，那么以后 this 就是函数的实例，否则是 obj */
        if (this instanceof fBind) {object[fn].applay(this, arg)
        } else {object[fn](...arg)
        }
        delete object[fn]
    }
    return fBind
}
function a(c) {console.log('aaa', this.a + this.b + c);
}
const obj = {
    a: 1,
    b: 2
}
a.myBind(obj, 1)(); // 打印 4

关于前端:一文读懂Js中的this指向

前言

本质

应用场合

全局环境下

构造函数中

对象的办法中

数组办法中的 this

原型链中 this

DOM 事件处理函数

setTimeout & setInterval

箭头函数中的 this

Function.prototype.call()

应用

参数

手动实现

Function.prototype.apply()

将数组的空元素变为`undefined`

转换相似数组的对象

手动实现

Function.prototype.bind()

每一次返回一个新函数

联合回调函数应用

联合 `call()` 办法应用

手动实现

Just My Socks（注册教程内含优惠码）

关于前端:一文读懂Js中的this指向

前言

本质

应用场合

全局环境下

构造函数中

对象的办法中

数组办法中的 this

原型链中 this

DOM 事件处理函数

setTimeout & setInterval

箭头函数中的 this

Function.prototype.call()

应用

参数

手动实现

Function.prototype.apply()

将数组的空元素变为undefined

转换相似数组的对象

手动实现

Function.prototype.bind()

每一次返回一个新函数

联合回调函数应用

联合 call() 办法应用

手动实现

Just My Socks（注册教程 内含优惠码）

将数组的空元素变为`undefined`

联合 `call()` 办法应用

Just My Socks（注册教程内含优惠码）