乐趣区

关于javascript:前端内练基础关于this的理解

jiezi

前言：this 的关键字是 JavaScript 中最简单的机制之一，它是有一个很特地的关键字，被主动定义在所有函数作用域中。然而即便是十分有教训的 JavaScript 开发者也很难说清它到底指向的是什么。

——起源《你不晓得的 JavaScript 上卷》

在开始之前 咱们先带着几个问题登程。
  • this 的定义什么？
  • 有几种绑定形式，别离是什么？谁的优先级比拟高？
  • 扭转 this 的指向有几种形式，别离是什么？底层是如何实现的？
this 的定义

this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数时的各种条件，this 的绑定和函数申明的地位没有任何关系，只取决函数的调用形式。

举个例子：

function foo () {
   var a = 2;
   this.bar();}

function bar() {console.log(this.a)
}

foo();  // undefined

解析：

其实从下面那段代码能够显著看到，当 foo() 进行调用的时候, 能够了解代码解析成 window.foo() 这个时候 this.bar() 指向的就是window, 同样的在 bar() 函数打印的console.log(this.a) 能够了解为 console.log(window.a) 然而真正的 var a = 2 其实是在 foo() 作用域中，以后的 window 对象 中并不存在，那么只能输出undefined。

总结：
this 实际上是在函数被调用时产生的绑定，它的指向什么齐全取决于函数在哪里调用。

一、了解调用地位
function baz() {
    // 以后的调用栈：baz
    // 因而，以后的调用地位是全局作用域
    
    console.log('baz')
    bar() // bar 的调用地位}

function bar() {
   // 以后的调用栈是 baz -> bar
   // 因而，以后的调用地位在 bar 中。console.log('bar')
   foo(); // <-- foo 的调用地位}

function foo() {
    // 以后的调用栈是 baz -> bar -> foo
    // 因而，以后的调用地位在 bar 中。console.log('foo')
}

baz(); // <--- baz 的调用地位

留神咱们是如何从调用栈中剖析出真正的调用地位，它决定了 this 的绑定。

二、绑定规定
  • 默认绑定
  • 隐式绑定
  • 显式绑定
  • 显式绑定变种之硬绑定
  • new 绑定
默认绑定
function foo () {console.log(this.a)
}

var a = 2;

foo();

解析：

function foo () {// console.log(this.a)
    console.log(window.a)
}

// var a = 2;
window.a = 2;

// foo();
window.foo();

你应该了解的第一件事就是申明在全局作用域的变量，都会挂载到 window 对象中，当然除了 es6 的 let、const 等存在着暂时性死区的申明。

总结：

在代码中,foo()间接应用不带任何润饰的函数援用进行调用，就是默认绑定。

留神：

如果应用严格模式，则不能将全局的对象用于默认绑定，因而 this 会绑定到 undefined

function foo () {
    "use strict"

    console.log(this.a)
}

var a = 2;

foo(); //  Cannot read property 'a' of undefined

细节：
在严格模式中间接调用 foo(), 不会影响默认的绑定。

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

var a = 2;

;(function(){
    "use strict"

    foo();}())
隐式绑定

例 1：
一般的隐式绑定

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

var obj = {
    a:2,
    foo:foo
}

obj.foo()

解析：

// function foo () {//     console.log(this.a)
// }

var obj = {
    a:2,
    // foo:foo,
    foo() {// 函数执行时，this 指向的 obj，console.log(obj.a)
        console.log(obj.a)
    }
}

obj.foo()

例 2：
对象属性援用链只有上一层或者最初一层调用地位起作用。

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

var obj2 = {
    a:42,
    foo:foo
}

var obj1 = {
    a:2,
    obj2:obj2 
}

obj1.obj2.foo() // 42

解析：

// function foo() {//     console.log(this.a)
// }

var obj2 = {

    a:42,
    // foo:foo   // 我是在最初一层、我不论你后面是谁，我都指向你 => obj2
    foo(){//  函数执行时，this 指向的 obj2，console.log(obj2.a)
        console.log(obj2.a)
    }
}

var obj1 = {
    a:2,
    obj2:obj2 
}

obj1.obj2.foo() // 42

例 3：

隐式绑定 this 失落

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

var obj = {
    a:2,
    foo:foo
}

var bar = obj.foo // 函数别名

var a = 'window'

bar()

解析：

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

// 第一步
var obj = {
    a:2,
    // foo:foo
    foo(){
       /**
        * 函数在运行中是谁在调用的
        * 1、如果是 obj.foo() ; a = 2；因为以后的 this 指向是运行时的绑定。* 2、如果是函数别名 这个时候 其实在 window.xx，那么指向的就是全局
        * 
       */
        console.log(this.a)
    }
}

// 第二步
// 如果间接执行 obj.foo() ; a = 2

// 第三步
// var bar = obj.foo // 函数别名
window.bar = function(){console.log(this.a) // this => window
}

var a = '我是全局'

bar()

尽管 bar 是 obj.foo 的一个援用，实际上它援用的是 foo 的函数自身，因而利用了默认绑定

总结：
当函数援用有上下文对象时，隐式绑定规定会把函数调用中的 this 绑定到这个上下文对象，

显式绑定

一般的显式绑定

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

var obj = {a:2}

foo.call(obj)

解析：

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

var obj = {
    a:2,
    foo(){  // 我借用一下这个办法喽
        console.log(this.a)
    }
}

foo.call(obj)

那么 怎么了解 call 到底做了什么？能让 obj 借用 foo 的办法呢。

call 的实现

Function.prototype.call_ = function (context, ...args) {
    var context = context || window;  // 1、传入对象了吗？没有的就是全局喽
    context.fn = this;  // 2、是谁在调用我，那我指向谁

    var result = eval('context.fn(...args)'); //3、应用 eval 把整个参数都执行一遍
    delete context.fn;  // 执行完了 我就删除之前的信息
    return result   
}

apply 的实现

Function.prototype.call_ = function (context, args) {
    var context = context || window;  // 1、传入对象了吗？没有的就是全局喽
    context.fn = this;  // 2、是谁在调用我，那我指向谁

    var result = eval('context.fn(...args)'); //3、应用 eval 把整个参数都执行一遍
    delete context.fn;  // 执行完了 我就删除之前的信息
    return result   
}

其实从代码中就能够看出，两个实现的形式都是一样的，然而 call 传递的是一般的参数，apply 传递的是数组。

硬绑定

显示绑定的变种 -> bind

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

var obj = {a:2}

var bar = function () {foo.call(obj)
}

bar();  // 2

setTimeout(bar,1000);  // 2

bar.call(window); //2

硬绑定的原理就是不论之后怎么调用 bar，它总会手动在 obj 上调用 foo。既然硬绑定相当于 bind 绑定，那么原生的 bind 是怎么实现的呢？

bind 实现：

Function.prototype.bind = function (context, ...args) {
    // 1、必须传递一个函数、< 我可是挂载到函数原型的一个办法 >
    if(typeof this !== 'function') {throw new Error('你得传递一个函数呀')
    }

    // 2、存储以后的指针对象
    var self = this;    

    // 3、返回一个函数
    var fbund = function () {
        // 3-1 应用 apply 的办法判断绑定的原型对象，拼接里面的函数和返回函数的 arguments 参数
        self.apply(this instanceof self ? this : context, args.concat([...arguments]))
    }

    // 4、以后的原型存储、保留原型对象
    if(this.prototype) {fbund.prototype = Object.create(this.prototype)
    }

    // 返回硬绑定的函数对象；< 对 我就是 bar>
    return fbund
}

利用的场景：

包裹函数: 承受参数并返回值

function foo (soms) {console.log(this.a,soms);
   return this.a + soms
}

var obj = {a:2}

var bar = function () {return foo.apply(obj,arguments)
}

var b = bar(2)
console.log(b);
new 绑定

想要理解 new 绑定的原理，首先要理解 new 关键字调用的时候产生了什么。

  • 创立一个全新的对象
  • 这个新对象会被执行 prototype 链接
  • 这个新对象会绑定到函数调用的 this
  • 如果函数没有返回其余对象，那么 new 表达式中的函数调用会主动返回这个新对象

示例代码：

function Foo (a) {this.a = a;}

var bar = new Foo(2)

console.log(bar.a)

new 的实现

function _new (ctor, ...args) {
    // 1、必须传递一个函数、if(typeof ctor !== 'function') {throw new Error('你得传递一个函数呀')
    }

    // 2、创立一个全新的对象
    let obj = new Object();

    // 3、执行 prototype 链接
    obj.__proto__ = Object.create(ctor.prototype);

    // 4、传递执行的参数
    let res = ctor.apply(obj,[...args]) 

    let isObject = typeof res === 'object' && res !== null;
    let isFunction = typeof res === 'function';

    // 5、判断构造函数是否返回了一个对象 \ 函数、如果返回对象那么就执行对象 \ 函数
    return isObject || isFunction ? res : obj;
}
箭头函数
function foo () {return (a) => {console.log(this.a)
    }
}

var obj1 = {a:2};

var obj2 = {a:3};

var bar = foo.call(obj1)

bar.call(obj2);

解析：
foo()外部创立的箭头函数会捕捉调用时的 foo() 的 this，因为 foo() 的 this绑定到了 obj1,bar(箭头函数) 的 this也会绑定到 obj1，箭头函数的绑定 无奈被批改。

总结：
须要晓得的是：箭头函数 基本 没有本人的 this，导致外部的this 指向了外层代码的 this， 这个指向在定义时就曾经确定而不会在调用时指向其执行环境的（变量）对象。

三、绑定优先级判断

首先确定一点的是: 默认绑定的优先级是最低的。

隐式绑定和显式绑定哪个优先级更高？

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

var obj1 = {
   a:2,
   foo:foo
}

var obj2 = {
   a:3,
   foo:foo
}

obj1.foo();  // 2
obj2.foo();  // 3

obj1.foo.call(obj2); // 3
obj2.foo.call(obj1); // 2

总结：显式绑定优先级高。

隐式绑定和 new 绑定哪个优先级更高？

function foo (some) {this.a = some}

var obj1 = {foo:foo}

var obj2 = {}

obj1.foo(2);
console.log(obj1.a)    // 2

var bar = new obj1.foo(4)
console.log(obj1.a)  // 2
console.log(bar.a)   // 4

总结：new 绑定优先级高。

显式绑定和 new 绑定哪个优先级更高？

function foo (some) {this.a = some;}

var obj1 = {};

var bar = foo.bind(obj1)
bar(2);

console.log(obj1.a) // 2

var baz = new bar(3);
console.log(obj1.a) // 2
console.log(baz.a) // 3

总结：new 绑定优先级高。

论断：new 绑定 > 显式绑定 > 隐式绑定 > 默认绑定。

论断

以上就是对于 this 的全副知识点，想要全副弄清楚还须要多写多看，上面让咱们来几道对于 this 指向的题在坚固一下方才看的内容。

四、对于 this 的面试题

实例代码 1:

var a = 1
function foo () {
  var a = 2
  function inner () {console.log(this.a) // ?
  }
  inner()}

foo()

实例代码 2:

var obj = {
  a: 1,
  foo: function (b) {
    b = b || this.a
    return function (c) {console.log(this.a + b + c)
    }
  }
}
var a = 2
var obj2 = {a: 3}

obj.foo(a).call(obj2, 1)
obj.foo.call(obj2)(1)

实例代码 3:

function foo1 () {console.log(this.a)
}
var a = 1
var obj = {a: 2}

var foo2 = function () {foo1.call(obj)
}

foo2()
foo2.call(window)

更多请参考 this 面试题

退出移动版