W.T.的博客

Every day to be a little better

JavaScript学习笔记03-JS函数的this指向

发表于 更新于 分类于
本文字数： 14k 阅读时长 ≈ 12 分钟
this的四种绑定：默认绑定，隐式绑定，显式绑定(call/apply/bind)，new绑定；四种绑定的优先级：new>bind>call/apply>隐式>默认；箭头函数

1. 为什么需要this

  • 在常见的编程语言中，几乎都有this这个关键字(Objective-C中使用的是self)，但是JavaScript中的this和常见的面向对象语言中的this不太一样

    • 常见面向对象的编程语言中，比如Java、C++、Swift、Dart等等一系列语言中，this通常只会出现在类的方法中
    • 也就是需要有一个类，类中的方法(特别是实例方法)中，this代表的是当前调用对象
    • 但是JavaScript中的this更加灵活，无论是它出现的位置还是它代表的含义。

  • 编写一个obj的对象，有this和没有this的区别

    • 没有this

      从某些角度来说，开发中如果没有this，很多问题也会有解决方案

      但是没有this，会让代码的编写变得非常不方便

      比如下列代码，函数中希望使用对象中的变量，通过obj.name；如果将obj换成info，则需要将所有name的调用改为info.name，十分不方便

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      var obj = {
          name: 'test',
          running: function(){
              console.log(obj.name +" running")
          },
          eating: function(){
              console.log(obj.name +" eating")
          },
          studying: function(){
              console.log(obj.name +" studying")
          }
      }

    • 有this

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      var obj = {
          name: 'test',
          running: function(){
              console.log(this.name+" running")
          },
          eating: function(){
              console.log(this.name+" eating")
          },
          studying: function(){
              console.log(this.name+" studying")
          }
      }

2. this指向什么

  • this在全局作用于下，在浏览器中测试就是指向window

    1
    2
    3
    4
    5
    6
    7
    console.log(this);

    var name = "test";
    //test
    console.log(this.name);
    //test
    console.log(window.name);

  • nodejs中的this指的是 {}

    在lib/internal/modules/cjs/loader.js中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const compiledWrapper = wrapSafe(filename, content, this);

    // this.exports = {}
    setOwnProperty(this, 'exports', {});

    const exports = this.exports;
    const thisValue = exports;

    // result = compiledWrapper.call({},exports, require, module, filename, dirname)
    result = ReflectApply(compiledWrapper, thisValue,[exports, require, module, filename, dirname]);

  • 开发中很少直接在全局作用于下去使用this，通常都是在函数中使用

    • 所有的函数在被调用时，都会创建一个执行上下文
    • 这个上下文中记录着函数的调用栈、AO对象等
    • this也是其中的一条记录

  • 先来看一个让人困惑的问题

    • 定义一个函数，采用三种不同的方式对它进行调用，它产生了三种不同的结果

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      function foo(){
          console.log(this);
      }

      // 1. 直接调用这个函数
      foo() // window

      // 2. 创建一个对象，对象中函数指向foo
      var obj = {
          name : 'why',
          foo: foo
      }
      obj.foo()//obj对象

      // 3. apply/call调用
      foo.apply("abc") // String{"abc"}对象

  • 这个的案例有什么样的启示

    1. 函数在调用时，JavaScript会默认给this绑定一个值
    2. this的绑定和定义的位置(编写的位置)没有关系
    3. this的绑定和调用方式以及调用的位置有关系
    4. this是在运行时被绑定的;

  • 那么this到底是怎么样的绑定规则呢

    • 绑定一：默认绑定
    • 绑定二：隐式绑定
    • 绑定三：显式绑定
    • 绑定四：new绑定

3. 默认绑定

  • 什么情况下使用默认绑定呢

    • 独立函数调用

    • 可以理解成函数没有被绑定到某个对象上进行调用

  • 通过几个案例来看一下，常见的默认绑定

3.1. 案例一

1
2
3
4
function foo1(){
  console.log(this);
}
foo1();//window

3.2. 案例二

1
2
3
4
5
6
7
8
9
10
11
12
function test1(){
  console.log(this);
  test2();
}
function test2(){
  console.log(this);
  test3();
}
function test3(){
  console.log(this);
}
test1();//window

3.3. 案例三

1
2
3
4
5
6
7
8
9
10
function foo(func){
  func();
}
var obj = {
  name: "test",
  bar: function(){
    console.log(this);
  }
}
foo(obj.bar);//window

4. 隐式绑定

  • 另外一种比较常见的调用方式是通过某个对象进行调用的

    • 也就是它的调用位置，是通过某个对象发起的函数调用

  • 通过几个案例来看一下，常见的隐式绑定

4.1. 案例一

1
2
3
4
5
6
7
8
function foo1(){
    console.log(this);
}
var obj = {
    name: 'test',
    foo: foo1
}
obj.foo(); //obj对象

4.2. 案例二

1
2
3
4
5
6
7
8
9
10
11
12
function foo2(){
    console.log(this);
}
var obj1 = {
    name: 'obj1',
    foo: foo2
}
var obj2 = {
    name: 'obj2',
    obj1: obj1
}
obj2.obj1.foo();//obj1对象

4.3. 案例三

1
2
3
4
5
6
7
8
9
function foo3(){
    console.log(this);
}
var obj3 = {
    name: 'obj',
    foo: foo3
}
var bar = obj3.foo;
bar();//window

5. 显式绑定call、apply、bind

  • 隐式绑定有一个前提条件

    • 必须在调用的对象内部有一个对函数的引用(比如一个属性)
    • 如果没有这样的引用，在进行调用时，会报找不到该函数的错误
    • 正是通过这个引用，间接的将this绑定到了这个对象上;

  • 如果不希望在对象内部包含这个函数的引用，同时又希望在这个对象上进行强制调用，该怎么做

    • JavaScript所有的函数都可以使用call和apply方法(这个和Prototype有关)
      • 它们两个的区别：第一个参数是相同的，后面的参数，apply为数组，call为参数列表
    • 这两个函数的第一个参数都要求是一个对象，这个对象的作用就是给this准备的
    • 在调用这个函数时，会将this绑定到这个传入的对象上

  • 通过call或者apply绑定this对象

    • 显示绑定后，this就会明确的指向绑定的对象
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function foo(){
        console.log(this);
    }

    foo.call(window);//window
    foo.call({name:'test'});//{name:'test'}
    foo.call(123);//Number{123}

    function sum(num1,num2){
        console.log(num1+num2,this);
    }
    sum.call("call",1,2);//3 String{'call}
    sum.apply("apply",[1,2]);//3 String{'apply'}

  • 如果希望一个函数总是显示的绑定到一个对象上

    1
    2
    3
    4
    5
    6
    7
    8
    function foo(){
        console.log(this);
    }
    var obj = {
        name: 'test'
    }
    var bar = foo.bind(obj);
    bar();//obj对象

6. new绑定

  • JavaScript中的函数可以当做一个类的构造函数来使用，也就是使用new关键字
  • 使用new关键字来调用函数是，会执行如下的操作:
    1. 创建一个全新的对象
    2. 这个新对象会被执行prototype连接
    3. 这个新对象会绑定到函数调用的this上(this的绑定在这个步骤完成)
    4. 如果函数没有返回其他对象，表达式会返回这个新对象
1
2
3
4
5
6
7
8
9
function Person(name){
    // Person{}
    console.log(this);
    this.name = name;
}

var p = new Person("test");
// Person{name:'test'}
console.log(p);

7. 规则优先级

如果一个函数调用位置应用了多条规则，优先级谁更高呢

new>显式>隐式>默认

7.1. 默认规则最低

  • 毫无疑问，默认规则的优先级是最低的，因为存在其他规则时，就会通过其他规则的方式来绑定this

7.2. 显式绑定级高于隐式绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function foo(){
    console.log(this);
}

// 1. 显式高于隐式
var obj = {
    name: 'test',
    foo: foo
}
//String{'abc'}
obj.foo.apply('abc');
//String{'cba'}
obj.foo.call('cba');

// 2. bind绑定高于隐式
obj.foo = foo.bind('nba')
// String{'nba'}
obj.foo()

7.3. bind高于call/apply

1
2
3
4
5
function foo(){
    console.log(this);
}
// String{'abc'}
foo.bind('abc').call('cba');

7.4. new绑定级高于隐式绑定

1
2
3
4
5
6
7
8
9
10
function foo(){
    console.log(this);
}
var obj = {
    name: 'test',
    foo: foo
}
// new绑定高于隐式
// foo{}
var f = new obj.foo()

7.5. new绑定高于bind

  • new绑定和call、apply是不允许同时使用的，所以不存在谁的优先级更高
  • new绑定可以和bind一起使用，new绑定优先级更高
1
2
3
4
5
function foo(){
    console.log(this);
}
var bar = foo.bind('abc');
var f = new bar();

8. 内置函数的绑定

  • 有些时候，调用一些JavaScript的内置函数，或者一些第三方库中的内置函数
    • 这些内置函数要求传入另外一个函数
    • 并不会显式的调用这些函数，而且JavaScript内部或者第三方库内部会帮忙执行
    • 这些函数中的this又是如何绑定的
  • setTimeout、数组的forEach、div的点击

8.1. setTimeout

1
2
3
4
setTimeout(function(){
  // window
  console.log(this);
},1000);

8.2. forEach

1
2
3
4
5
6
7
8
9
10
11
12
13
var names = ['abc','cba','nba'];
var obj = {
    name: 'test'
};
/**
 * Array<string>.forEach(
 * callbackfn: (value: string, index: number, array: string[]) => void, 
 * thisArg?: any): void
 */
names.forEach(function(){
    // 三个都指向obj
    console.log(this);
},obj);

8.3. div的onclick

1
2
3
4
5
const divEle = document.querySelector('div');
divEle.onclick=function(){
    // div对象
    console.log(this);
}

9. 箭头函数

  • 箭头函数 arrow function 是ES6之后增加的一种编写函数的方法，并且它比函数表达式要更加简洁

    • 箭头函数不会绑定this、arguments属性
    • 箭头函数不能作为构造函数来使用(不能和new一起来使用，会抛出错误);

  • 箭头函数如何编写

    • ()：函数的参数
    • {}：函数的执行体

9.1. 编写优化

  • 优化一：如果只有一个参数()可以省略

    1
    2
    var nums = [10,20,30,40]
    nums.forEach(item => {})

  • 优化二：如果函数执行体中只有一行代码, 那么可以省略大括号

    • 并且这行代码的返回值会作为整个函数的返回值

      1
      2
      3
      4
      5
      6
      7
      8
      var nums = [10,20,30,40];
      // nums.forEach(item => console.log(item));
      nums.filter(item => true);

      var result = nums
      		.filter(item => item%2==0)
        	.map(item => item*100)
        	.reduce((preValue,item) => preValue+item);

  • 优化三：如果函数执行体只有返回一个对象, 那么需要给这个对象加上()

    1
    2
    3
    4
    5
    6
    var foo = () => {
      return {
        name: 'test'
      }
    }
    var bar = () => ({name:'test'})

10. this规则之外

10.1. 忽略显式绑定

  • 如果在显式绑定中，传入一个null或者undefined，那么这个显示绑定会被忽略，使用默认规则
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function foo(){
    console.log(this);
}

var obj = {
    name: 'test'
}

// obj对象
foo.call(obj);
// window对象
foo.call(null);
// window对象
foo.call(undefined);

var bar = foo.bind(null);
// window对象
bar();

10.2. 间接函数引用

  • 创建一个函数的间接引用，这种情况使用默认绑定规则
    • 赋值(obj2.foo = obj1.foo)的结果是foo函数
    • foo函数被直接调用，那么是默认绑定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function foo(){
    console.log(this);
}
var obj1 = {
    name: 'obj1',
    foo: foo
}
var obj2 = {
    name: 'obj2'
}
// obj1对象
obj1.foo();
// window 对象
(obj2.foo = obj1.foo)();

10.3. ES6箭头函数

  • 箭头函数不使用this的四种标准规则(也就是不绑定this)，而是根据外层作用域来决定this

  • 来看一个模拟网络请求的案例

    • 使用setTimeout来模拟网络请求，请求到数据后如何可以存放到data中

    • 需要拿到obj对象，设置data

    • 但是直接拿到的this是window，需要在外层定义：var _this = this

    • 在setTimeout的回调函数中使用_this就代表了obj对象

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      var obj = {
          data: [],
          getData: function(){
              var _this = this;
              setTimeout(function(){
                  // window
                  console.log(this);
                  var res = ['abc','cba','nba'];
                  _this.data.push(...res)
              },1000);
          }
      }
      obj.getData()
      setTimeout(function(){
          //  ['abc', 'cba', 'nba']
          console.log(obj.data);
      },1000);

  • 从ES6开始，可以使用箭头函数

    • 为什么在setTimeout的回调函数中可以直接使用this

    • 因为箭头函数并不绑定this对象，那么this引用就会从上层作用于中找到对应的this

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      var obj = {
        data: [],
        getData: function(){
             setTimeout(() => {
                  // obj对象
                  console.log(this);
                  var res = ['abc','cba','nba'];
                  this.data.push(...res);
              },1000);
          }
      }
      obj.getData()
      setTimeout(function(){
          //  ['abc', 'cba', 'nba']
          console.log(obj.data);
      },1000);

  • 如果getData也是箭头函数，那么setTimeout中的回调函数中的this指向 - window

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var obj = {
        data: [],
        getData: () => {
            setTimeout(() => {
                // window
                console.log(this);
            },1000);
        }
    }

11. 面试题一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var name = "window";
var person = {
  name: "person",
  sayName: function(){
    console.log(this.name);
  }
};

function sayName(){
  var sss = person.sayName;
  // window 独立函数调用
  sss();
  // person 隐式调用
  person.sayName();
  // person 隐式调用
  (person.sayName)();
  // window 赋值表达式
  (b=person.sayName)();
}
sayName();

12. 面试题二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
var name = "window";
var person1 = {
    name: "person1",
    foo1: function(){
        console.log(this.name);
    },
    foo2: ()=> console.log(this.name),
    foo3: function(){
        return function(){
            console.log(this.name);
        }
    },
    foo4: function(){
        return ()=>{
            console.log(this.name);
        }
    }
}
var person2 = {
    name: "person2"
}
// person1 隐式调用
person1.foo1();
// person2 显式大于隐式
person1.foo1.call(person2);

// window 
// 箭头函数不绑定this，找上级作用域，上级作用域为全局
person1.foo2();
// window 
// 箭头函数的上级作用域为全局
person1.foo2.call(person2);

// window
// person1.foo3()执行后拿到的是return的函数，再()是独立函数调用
person1.foo3()();
// window 
// 执行call后this指向person2，再()是独立函数调用
person1.foo3.call(person2)();
// person2
//person1.foo3()拿到return后的函数，再进行的显式调用call
person1.foo3().call(person2);

// person1
// person1.foo4()拿到return后的箭头函数，箭头函数的上级作用域是一个函数，this指向person1
person1.foo4()();
// person2
// person1.foo4.call(person2)箭头函数的上级this绑定到person2，再()就找到person2
person1.foo4.call(person2)();
// person1
// person1.foo4()拿到箭头函数，箭头函数的上级this指向person1，call不能显式绑定箭头函数，仍指向person1
person1.foo4().call(person2);

13. 面试题三

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
var name = "window";
function Person(name){
    this.name = name;
    this.foo1 = function(){
        console.log(this.name);
    };
    this.foo2 = ()=> console.log(this.name);
    this.foo3 = function(){
        return function(){
            console.log(this.name);
        }
    };
    this.foo4 = function(){
        return ()=>{
            console.log(this.name);
        }
    }
}

var person1 = new Person("person1");
var person2 = new Person("person2");

// person1 隐式绑定
person1.foo1();
// person2 显式高于隐式
person1.foo1.call(person2);

// person1 箭头函数看上级作用域person1
person1.foo2();
// person1 
// call在箭头函数中不起作用，看箭头函数上级作用域person1
person1.foo2.call(person2);

// window
// person1.foo3()拿到return的函数，再()是独立函数调用
person1.foo3()();
// window
// person1.foo3.call(person2)得到函数，再()是独立函数调用
person1.foo3.call(person2)();
// person2
// person1.foo3()拿到return的函数，通过call显式绑定，this指向person2
person1.foo3().call(person2);

// person1
// person1.foo4()拿到箭头函数，再()箭头函数上级作用域为person1
person1.foo4()();
// person2
// 箭头函数的上级显式绑定到person2，再()就找到的是person2
person1.foo4.call(person2)();
// person1
// person1.foo4()拿到的是箭头函数，call不起作用，箭头函数上级作用域person1
person1.foo4().call(person2);

14. 面试题四

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var name = "window";
function Person(name){
    this.name = name;
  	this.obj = {
      name: "obj",
      foo1: function(){
          return function(){
            console.log(this.name);
          }
      },
      foo2: function(){
          return ()=>{
              console.log(this.name);
          }
      }
    }
}

var person1 = new Person("person1");
var person2 = new Person("person2");

// window
// person1.obj.foo1()拿到return的函数，再()就是独立函数调用
person1.obj.foo1()();
// window
// 显式绑定后返回的函数，再()还是独立函数调用
person1.obj.foo1.call(person2)();
// person2
// person1.obj.foo1()拿到return的函数，进行显式绑定，this指向了person2
person1.obj.foo1().call(person2);

// obj
// 箭头函数上级作用域为obj
person1.obj.foo2();
// person2
// 箭头函数上级作用域显示绑定到person2
person1.obj.foo2.call(person2)();
// obj
// person1.obj.foo2()拿到箭头函数，call不起作用，箭头函数上级作用域为obj
person1.obj.foo2().call(person2);

15. 实现apply、call、bind

15.1. call

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 给所有函数天机一个hycall方法
Function.prototype.hycall = function(thisArg, ...args){
    // 1.获取需要被执行的函数
    var fn = this;

    // 2.对thisArg转成对象类型(防止它传入的是非对象类型)
    if(thisArg == null || thisArg == undefined){
        thisArg = window;
    }
    else{
        thisArg = Object(thisArg);
    }

    // 3.调用需要被执行的函数
    thisArg.fn = fn;
    var result = thisArg.fn(...args);

    delete thisArg.fn;

    // 4.将最终的结果返回出去
    return result;
}

function foo(){
    console.log(this);
}

// 调用自己实现的hycall方法
// 实际为隐式调用
foo.hycall({name:'test'}); //{}
foo.hycall(1); //Number
foo.hycall(null); //window
foo.hycall(undefined) //window

15.2. apply

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 给所有函数天机一个hyapply方法
Function.prototype.hyapply = function(thisArg, args){
    // 1.获取需要被执行的函数
    var fn = this;

    // 2.对thisArg转成对象类型(防止它传入的是非对象类型)
    if(thisArg == null || thisArg == undefined){
        thisArg = window;
    }
    else{
        thisArg = Object(thisArg);
    }

    // 3.调用需要被执行的函数
    thisArg.fn = fn;
     
  	args = args || [];
    result = thisArg.fn(...args);

    delete thisArg.fn;

    // 4.将最终的结果返回出去
    return result;
}

function sum(num1, num2){
    console.log(num1 + num2, this);
}

// 调用自己实现的hyapply方法
// 实际为隐式调用
sum.hyapply({name:'test'},[1,2]);
sum.hyapply("abc");

15.3. bind

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 给所有函数天机一个hybind方法
Function.prototype.hybind = function(thisArg, ...bindArgs){
    // 1.获取需要被执行的函数
    var fn = this;

    // 2.对thisArg转成对象类型(防止它传入的是非对象类型)
    if(thisArg == null || thisArg == undefined){
        thisArg = window;
    }
    else{
        thisArg = Object(thisArg);
    }

    // 3.调用需要被执行的函数
    thisArg.fn = fn;

		return function(...newArg){
        var args = [...bindArgs, ...newArg];
        var result = thisArg.fn(...args);
        delete thisArg.fn;
        return result;
    }
}

function sum(num1, num2, num3){
    console.log(num1 + num2 + num3, this);
}

// 调用自己实现的hybind方法
// 实际为隐式调用
var result = sum.hybind({name:'test'},[1,2]);
result(3);
本文结束  感谢您的阅读