javascripts的this

前言

---

javascript 的 this 指向主要是依赖上下文对象决定，箭头函数例外。

默认绑定

---

在全局作用域下调用函数，函数的 this 默认指向 window 。

注意1：严格模式下，默认指向 undefined

function test() {

  console.log(this.a);

}

var a = 1;

test(); // 1

// 严格模式

function test() {

  'use strict';

  console.log(this.a);

}

var a = 1;

test(); // TypeEror 报错

注意2：全局作用域下 var 声明的变量会默认绑定到 window ，而 let 、 const 声明的变量不会

let a = 1;

var b = 1;

window.a // undefined

window.b // 1

隐式绑定

---

当函数引用有上下文对象时， this 隐式绑定到这个上下文对象中。

function test() {

  console.log(this.a);

}

var obj = {

  a: 1,

  test: test

}

var a = 2;

obj.test(); // 1

隐式丢失

function test() {

  console.log(this.a);

}

var obj = {

  a: 1,

  test: test

}

var a = 2;

// 隐式丢失，this 应用默认绑定规则

var bar = obj.test;

bar() // 2

显式绑定

call 、 apply 、 bind 等显式改变 this 指向。

注意：非严格模式下， call 、 apply 、 bind 等传入 null 、 undefined 会默认转为 window

function test() {

  console.log(this.a);

}

var obj = {

  a: 1

}

var a = 2;

test(); // 2

test.call(obj); // 1

test.apply(obj); // 1

var bTest = test.bind(obj);

bTest(); // 1

注意2：多次使用 bind ， this 只会指向第一次 bind 的 this

function test() {

  console.log(this.a);

}

var obj1 = { a: 1 }

var obj2 = { a: 2 }

var obj3 = { a: 3 }

var bind1 = test.bind(obj1);

bind1(); // 1

var bind2 = bind1.bind(obj2);

bind2(); // 1

var bind3 = bind2.bind(obj3);

bind3(); // 1

内置函数改变 this 指向

function test() {

  console.log(this.a);

}

var obj = {

  a: 1

}

var arr = [1, 2, 3];

arr.forEach(test, obj); // 打印 3 个 1

new 绑定

使用 new 操作符会产生如下步骤：

1. 创建一个新的空对象。
2. 将新对象与构造函数的 prototype 相连。
3. 新对象绑定带构造函数的 this 。
4. 如果构造函数有返回值，且返回值是 对象 ，则返回构造函数的返回值，否则返回新建的对象。

function create() {

  let obj = new Object();

  let constructor = [].shift.call(arguments);

  // obj.__proto__ = constructor.prototype;

  Object.setPrototypeOf(obj, constructor.prototype);

  // 改变 this

  let res = constructor.apply(obj, arguments);

  const isObj = Object.prototype.toString.call(res) === '[object Object]';

  return isObj ? result : obj;

}

箭头函数

---

箭头函数比较特殊，它有以下几个特点：

1. 没有自身的 this ，在定义时默认绑定父级作用域的 this ，即采用词法作用域绑定 this .

2. 没有原型 prototype ，无法使用 new 操作符，即不能作为构造函数.

3. 无法使用 call 、 apply 、 bind 等显式改变其 this .

   const test = () => console.log(this);
   
   let obj = {};
   
   test(); // window
   
   test.call(obj); // window
   
   const foo = test.bind(obj);
   
   foo(); // window