this

说到this,需要明确三方面内容:

  • this何时被赋值
  • this被赋了什么值
  • 内置函数如何使用this的

this何时被赋值

进入函数代码

当控制流根据一个函数对象 F、调用者提供的 thisArg 以及调用者提供的 argumentList,进入函数代码的执行环境时,执行以下步骤:

  1. 如果函数代码是严格模式下的代码,设 this 绑定 为 thisArg。
  2. 否则如果 thisArg 是 null 或 undefined ,则设 this 绑定为全局对象。
  3. ……
以上信息来源:进入函数代码

从上诉信息中可以知道

  • this 与调用者提供的 thisArg 密切相关
  • this 在严格模式下为 thisArg
  • this 在非严格模式下为 thisArg 或 全局对象

那么 thisArg 又是怎么来的呢?下面来看下函数调用过程:

函数调用

  1. 令 ref 为解释执行 MemberExpression 的结果。
  2. 令 func 为 GetValue(ref)。
  3. 令 argList 为解释执行 Arguments 的结果,产生参数值们的内部列表(参见 11.2.4)。
  4. 如果 Type(func) 不是 Object,抛出一个 TypeError 异常。
  5. 如果 IsCallable(func) 为 false,抛出一个 TypeError 异常。
  6. 如果 Type(ref) 为 Reference,那么

    • 如果 IsPropertyReference(ref) 为 true,

      • 那么令 thisValue 为 GetBase(ref)。
    • 否则,ref 的基值是一个环境记录项。

      • 令 thisValue 为调用 GetBase(ref) 的 ImplicitThisValue 具体方法的结果。
  7. 否则,Type(ref) 不是 Reference。

    • 令 thisValue 为 undefined。
  8. 返回调用 func 的 [[Call]] 内置方法的结果,传入 thisValue 作为 this 值和列表 argList 作为参数列表。
以上信息来源:函数调用

从上诉信息中可以知道

  • thisArg 即 thisValue
  • thisValue 与 ref 的类型密切相关
  • 如果 ref 的类型是 Reference(引用规范类型

    • 如果 ref 是属性引用,通过 GetBase(ref)(返回引用值ref的基值部分) 获取 thisValue
    • 否则,通过 ImplicitThisValue 方法获取 thisValue
  • 否则,thisValue 为 undefined

那么,了解到这里可能有许多新的疑问,比如:

  • Reference 是怎样的类型
  • ref 是怎么来的
  • ref 什么时候是 Reference,什么时候不是。
  • GetBase(ref) 和 ImplicitThisValue 是如何产生结果的
Reference 是怎样的类型

首先先解释下 Reference。

其实ES中的类型分为ECMAScript语言类型规范类型

ECMAScript语言类型对应的是程序员使用 ECMAScript 语言直接操作的值,如 Undefined、Null、Boolean、String、Number、Object等。
规范类型可用来描述 ECMAScript 表达式运算的中间结果,但这样的值不能储存为对象的属性或 ECMAScript 语言的变量值。引用尤雨溪的解释:

这里的 Reference 是一个 Specification Type,也就是 “只存在于规范里的抽象类型”。它们是为了更好地描述语言的底层行为逻辑才存在的,但并不存在于实际的 js 代码中。
ref 是怎么来的

从上诉函数调用中可以知道,ref 是解释执行 MemberExpression 的结果。
下面详细看下 MemberExpression 的解析过程:

产生式 CallExpression : MemberExpression Arguments 按照下面的过程执行 :

  1. 令 baseReference 为解释执行 MemberExpression 的结果。
  2. 令 baseValue 为 GetValue(baseReference)。
  3. 令 propertyNameReference 为解释执行 Expression 的结果。
  4. 令 propertyNameValue 为 GetValue(propertyNameReference)。
  5. 调用 CheckObjectCoercible(baseValue)。
  6. 令 propertyNameString 为 ToString(propertyNameValue)。
  7. 如果正在执行中的语法产生式包含在严格模式代码当中,令 strict 为 true,否则令 strict 为 false。
  8. 返回一个值类型的引用,其基值为 baseValue 且其引用名为 propertyNameString,严格模式标记为 strict。

从上诉信息中分析可以知道

  • 解释执行 MemberExpression 的结果是一个引用规范类型(Reference)
  • 这个引用规范类型包含三部分信息:

    • baseValue
    • propertyNameString
    • strict
  • thisValue 的值取决于 baseValue
  • baseValue 是调用 GetValue 获得的。
  • GetValue 得到的基值是 undefined、Object、Boolean、String、Number、环境记录项中的任意一个(详见:引用规范类型),而不是引用规范类型。
GetValue 详细过程见:GetValue
ref 什么时候是 Reference,什么时候不是 Reference

一般来说,ref 是MemberExpression解析的结果,都将是 Reference。
但是,如果 MemberExpression 是其函数表达式的一部分,则可能将改变最终解析结果的类型。
而改变解析结果类型的主要原因取决于是否调用了 GetValue 方法,如果调用了 GetValue ,函数中间值 ref 将是 Object 类型。

那么哪些表达式不使用 GetValue 呢?

更多表达式详见:表达式
GetBase(ref) 和 ImplicitThisValue 是如何产生结果的
  • GetBase:返回引用值ref的基值部分
  • ImplicitThisValue : 声明式环境记录项永远将 undefined 作为其 ImplicitThisValue 返回。

this被赋了什么值

其实在 this何时被赋值 部分已经介绍了 this被赋了什么值。下面总结三种赋值过程:

第一种this赋值过程:

var v = 1; 
var obj = {
    v: 2,
    fn: function(){
        console.log(this.v);
    }
}
obj.fn(); // 2
(obj.fn)(); // 2
  1. 调用表达式解析 obj.fn ,返回引用规范类型,baseValue 为 obj。
  2. 函数调用,由于 1 过程返回的为引用规范类型,且为属性引用,调用 GetBase 将 baseValue (obj) 作为返回值,返回给 thisValue。
  3. 进入函数代码,thisArg 为 obj,将其赋值给 this。

如果对步骤1中,baseValue 为 obj 有疑问,详见属性访问, 产生式 MemberExpression : MemberExpression [ Expression ] 执行过程。
相当于有两个过程:

  1. 解析obj,baseValue 为声明式环境记录项。
  2. 解析obj.fn,baseValue 为 obj。

第二种this赋值过程:

function foo(){
    console.log(this);
}
foo(); // Window
  1. 调用表达式解析 foo, 返回引用规范类型,baseValue 为声明式环境记录项(函数声明时绑定)。
  2. 函数调用,由于 1 过程返回的为引用规范类型,且不为属性引用,调用 ImplicitThisValue 方法,返回 undefined 。
  3. 进入函数代码,thisArg 为 undefined,非严格模式下将 this 赋值为全局对象。

第三种this赋值过程:

var v = 1; 
var obj = {
    v: 2,
    fn: function(){
        console.log(this.v);
    }
}
var fn2 = obj.fn;
fn2(); // 1
(obj.fn, obj.fn)(); // 1
  1. 调用表达式解析 fn2,(obj.fn, obj.fn) ,由于赋值表达式、逗号表达式都使用了 GetValue 方法,返回函数(Object 类型)。
  2. 函数调用,由于 1 过程返回的不是引用规范类型,所以 thisValue 为 undefined`。
  3. 进入函数代码,thisArg 为 undefined,非严格模式下将 this 赋值为全局对象。

内置函数如何使用this的

内置函数修改 this 是通过给 func 的 [[Call]] 内置方法传递 thisArg 来实现的。

内置方法

内置方法模拟实现

使用成员表达式模拟内置方法[[Call]]的效果:

apply
Function.prototype.apply_ = function (context, arr) { 
    var context = Object(context) || window;
    var result;

    // 临时记录需要调用的function 
    context.fn = this;
      
    if (!arr) {
        result = context.fn();
    }
    else {
        var args = [];
        for (var i = 0, len = arr.length; i < len; i++) {
            args.push('arr[' + i + ']');
        }
        // 使用成员表达式指定context.fn执行时this为context 
        result = eval('context.fn(' + args + ')')
    }

    delete context.fn
    return result;
}
call
Function.prototype.call_ = function (context) {
    var context = context || window;
    context.fn = this;

    var args = [];
    // 获取参数列表 
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    } 
    // 使用成员表达式指定context.fn执行时this为context  
    var result = eval('context.fn(' + args +')');

    delete context.fn
    return result;
}  
bind
Function.prototype.bind_  = function (context) {
    // 记录bind的函数 
    var self = this;
    var args = [];
    // 获取绑定的参数列表 
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    } 

    // 创建新函数 
    var fbound = function () {
        // 获取未绑定的参数列表 
        var bindArgs = Array.prototype.slice.call(arguments);
        // fbound被当做构造函数使用,this指向实例。否则,指向 context
        self.apply(this instanceof self ? this : context, args.concat(bindArgs));
    } 
    // 维护原型关系   
    fbound.prototype = self.prototype || new Function().prototype ;
    return fbound;
}

参考文档


奇默
4 声望0 粉丝