당신이 모르는 자바스크립트

JavaScript 칼럼에서는 꼭 알아야 할 몇 가지 작업을 소개합니다.

프론트엔드 서클 학생들은 다른 '서클' 학생들과 달리 '손글씨 xxx 방식'에 열광하고, 기본적으로 너겟에서는 비슷한 글을 매일 볼 수 있습니다. 그러나 많은 기사(전체를 대표하는 것도 아니고 공격하려는 의도도 없음)는 대부분 진실을 삼키고 이전 내용을 복사하고 있어 면밀한 조사와 연구를 견딜 수 없으며 이제 막 JavaScript를 시작하는 신입생을 쉽게 오도할 수 있습니다.

이를 고려하여 이 기사는 "JavaScript You Don't Know"(Little Yellow Book)의 몇 가지 일반적인 지식 포인트를 기반으로 하며 몇 가지 고전적이고 빈도가 높은 "손으로 쓴" 방법을 결합하여 원리와 구현을 결합합니다. 코드를 직접 작성하기 전에 급우들과 함께 원리를 이해해 보세요.

1. 연산자 new

설명하기 전에 먼저 JavaScript의 함수와 객체에 대한 매우 일반적인 오해를 명확히 해야 합니다.

전통적인 클래스 지향 언어에서 "생성자"는 클래스의 일부 함수입니다. new를 사용하여 클래스를 초기화하면 클래스의 생성자가 호출됩니다. 일반적인 형태는 다음과 같습니다. new 初始化类时会调用类中的构造函数。通常的形式是这样的：

something = new MyClass(..);复制代码

JavaScript 也有一个 new 操作符，使用方法看起来也和那些面向类的语言一样，绝大多数开发者都认为 JavaScript 中 new 的机制也和那些语言一样。然而，JavaScript 中 new 的机制实际上和面向类的语言完全不同。

首先我们重新定义一下 JavaScript 中的“构造函数”。在 JavaScript 中，构造函数只是一些使用 new 操作符时被调用的函数。它们并不会属于某个类，也不会实例化一个类。实际上，它们甚至都不能说是一种特殊的函数类型，它们只是被 new

/**
* @param {fn} Function(any) 构造函数
* @param {arg1, arg2, ...} 指定的参数列表
*/
function myNew (fn, ...args) {
    // 创建一个新对象，并把它的原型链（__proto__）指向构造函数的原型对象
    const instance = Object.create(fn.prototype)

    // 把新对象作为thisArgs和参数列表一起使用call或apply调用构造函数
    const result = fn.apply(instance, args)

    如果构造函数的执行结果返回了对象类型的数据（排除null），则返回该对象，否则返新对象
    return (result && typeof instance === 'object') ? result : instance
}  
复制代码

JavaScript에도 new 연산자가 있으며 사용 방법은 클래스 지향 언어와 동일해 보입니다. 대부분의 개발자는 JavaScript의 new 의 메커니즘도 해당 언어와 동일합니다. 그러나 JavaScript의 <code>new 메커니즘은 실제로 클래스 지향 언어의 메커니즘과 완전히 다릅니다.

new 来调用函数，或者说发生构造函数调用时，会自动执行下面的操作:

1. 创建（或者说构造）一个全新的对象；
2. 这个新对象会被执行 [[ 原型 ]] 连接；
3. 这个新对象会绑定到函数调用的 this ；
4. 如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象。

因此，如果我们要想写出一个合乎理论的 new ，就必须严格按照上面的步骤，落实到代码上就是：

/**
* @param {left} Object 实例对象
* @param {right} Function 构造函数
*/
function myInstanceof (left, right) {
    // 保证运算符右侧是一个构造函数
    if (typeof right !== 'function') {
        throw new Error('运算符右侧必须是一个构造函数')
        return
    }

    // 如果运算符左侧是一个null或者基本数据类型的值，直接返回false 
    if (left === null || !['function', 'object'].includes(typeof left)) {
        return false
    }

    // 只要该构造函数的原型对象出现在实例对象的原型链上，则返回true，否则返回false
    let proto = Object.getPrototypeOf(left)
    while (true) {

        // 遍历完了目标对象的原型链都没找到那就是没有，即到了Object.prototype

        if (proto === null) return false

        // 找到了
        if (proto === right.prototype) return true

        // 沿着原型链继续向上找
        proto = Object.getPrototypeOf(proto)
    }
}复制代码

示例代码中，我们使用Object.create(fn.prototype)创建空对象，使其的原型链__proto__指向构造函数的原型对象fn.prototype，后面我们也会自己手写一个Object.create()方法搞清楚它是如何做到的。

二、操作符instanceof

在相当长的一段时间里，JavaScript 只有一些近似类的语法元素，如new 和 instanceof，不过在后来的 ES6 中新增了一些元素，比如 class 关键字。

在不考虑class的前提下，new和instanceof之间的关系“暧昧不清”。之所以会出现new和instanceof这些操作符，其主要目的就是为了向“面向对象编程”靠拢。

因此，我们既然搞懂了new，就没有理由不去搞清楚instanceof。引用MDN上对于instanceof的描述：“instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上”。

看到这里，基本上明白了，instanceof的实现需要考验你对原型链和prototype的理解。在JavaScript中关于原型和原型链的内容需要大篇幅的内容才能讲述得清楚，而网上也有一些不错的总结博文，其中帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）就是一篇难得的精品文章，通透得梳理并总结了它们之间的关系和联系。

《你不知道的JavaScript上卷》第二部分-第5章则更基础、更全面地得介绍了原型相关的内容，值得一读。

以下instanceof代码的实现，虽然很简单，但是需要建立在你对原型和原型链有所了解的基础之上，建议你先把以上的博文或文章看懂了再继续。

/**
* 基础版本
* @param {Object} proto
*  
*/
Object.prototype.create = function (proto) {  
    // 利用new操作符的特性：创建一个对象，其原型链（__proto__）指向构造函数的原型对象
    function F () {}
    F.prototype = proto
    return new F()
}

/**
* 改良版本
* @param {Object} proto
*
*/
Object.prototype.createX = function (proto) {
    const obj = {}
    // 一步到位，把一个空对象的原型链（__proto__）指向指定原型对象即可
    Object.setPrototypeOf(obj, proto)
    return obj
}复制代码

三、 Object.create()

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__먼저 JavaScript에서 "생성자"를 재정의해 보겠습니다. JavaScript에서 생성자는 new 연산자를 사용할 때 호출되는 함수일 뿐입니다. 클래스에 속하지도 않고 클래스를 인스턴스화하지도 않습니다. 사실 특별한 함수 유형이라고 할 수도 없으며 단지 new 연산자가 호출하는 일반 함수일 뿐입니다.

🎜사실 소위 "생성자"는 없고 함수에 대한 "생성자 호출"만 있습니다. new를 사용하여 함수를 호출하거나 생성자 호출이 발생하면 다음 작업이 자동으로 수행됩니다: 🎜

1. 새로운 객체 생성(또는 구성);
2. 이 새 개체가 실행됩니다. [[ 프로토타입]] 연결
3. 이 새 개체는 함수 호출의 this 에 바인딩됩니다.
4. 함수가 다른 개체를 반환하지 않는 경우; 객체인 경우 새 표현식의 함수 호출은 자동으로 이 새 객체를 반환합니다.

🎜따라서 이론적 new를 작성하려면 위 단계를 엄격히 따르고 이를 코드에 구현해야 합니다. 🎜

var bar = new foo()复制代码

🎜 샘플에서 코드에서 Object.create(fn.prototype)를 사용하여 프로토타입 체인 __proto__가 프로토타입 개체 fn.prototype을 가리키도록 빈 개체를 만듭니다. 생성자 , 나중에 Object.create() 메서드를 직접 작성하여 이것이 어떻게 수행되는지 알아낼 것입니다. 🎜

2. 연산자 인스턴스of🎜🎜오랫동안 JavaScript에는 new 및 instanceof

이지만 이후 ES6에서는 class 키워드와 같은 몇 가지 새로운 요소가 추가되었습니다. 🎜🎜 class를 고려하지 않으면 new와 instanceof 사이의 관계가 "모호"합니다. new 및 instanceof 연산자 출현의 주요 목적은 "객체 지향 프로그래밍"에 더 가까워지는 것입니다. 🎜🎜이제 new를 이해했으니 instanceof를 이해하지 못할 이유가 없습니다. MDN의 instanceof 설명 인용: "instanceof 연산자는 생성자의 prototype 속성이 프로토타입의 프로토타입에 나타나는지 여부를 감지하는 데 사용됩니다. 체인의 인스턴스 개체입니다." 🎜🎜이것을 보고 기본적으로 instanceof 구현에서는 프로토타입 체인과 프로토타입에 대한 이해를 테스트해야 한다는 것을 이해했습니다. JavaScript의 프로토타입 및 프로토타입 체인에 대한 내용은 명확하게 설명하기 위해 많은 내용이 필요하며, JS의 프로토타입, __proto__ 및 생성자(그림)를 완전히 이해하는 데 도움이 되는 내용을 포함하여 인터넷에 좋은 요약 블로그 게시물도 있습니다. 그들 사이의 관계와 연결고리를 명쾌하게 빗질하고 요약한 보기 드문 훌륭한 기사입니다. 🎜

🎜"당신이 모르는 자바스크립트" 2부 - 5장에서는 프로토타입 관련 내용을 좀 더 기본적이고 포괄적으로 소개하므로 읽어볼 가치가 있습니다. 🎜

🎜다음 instanceof 코드의 구현은 매우 간단하지만 프로토타입 및 프로토타입 체인에 대한 이해를 바탕으로 해야 합니다. 먼저 위 블로그 게시물을 읽어보는 것이 좋습니다. 또는 기사를 이해하신 후 계속하세요. 🎜

var bar = foo.call(obj2)复制代码

3. Object.create()🎜🎜Object.create() 메소드는 새로운 객체를 생성하고 기존 객체를 사용하여 새로운 생성을 제공합니다. 코드>__proto__입니다. 🎜

在《你不知道的JavaScript》中，多次用到了Object.create()这个方法去模仿传统面向对象编程中的“继承”，其中也包括上面讲到了new操作符的实现过程。在MDN中对它的介绍也很简短，主要内容大都在描述可选参数propertiesObject的用法。

简单起见，为了和new、instanceof的知识串联起来，我们只着重关注Object.create()的第一个参数proto，咱不讨论propertiesObject的实现和具体特性。

/**
* 基础版本
* @param {Object} proto
*  
*/
Object.prototype.create = function (proto) {  
    // 利用new操作符的特性：创建一个对象，其原型链（__proto__）指向构造函数的原型对象
    function F () {}
    F.prototype = proto
    return new F()
}

/**
* 改良版本
* @param {Object} proto
*
*/
Object.prototype.createX = function (proto) {
    const obj = {}
    // 一步到位，把一个空对象的原型链（__proto__）指向指定原型对象即可
    Object.setPrototypeOf(obj, proto)
    return obj
}复制代码

我们可以看到，Object.create(proto)做的事情转换成其他方法实现很简单，就是创建一个空对象，再把这个对象的原型链属性（Object.setPrototype(obj, proto)）指向指定的原型对象proto就可以了（不要采用直接赋值__proto__属性的方式，因为每个浏览器的实现不尽相同，而且在规范中也没有明确该属性名）。

四、Function的原型方法：call、apply和bind

作为最经典的手写“劳模”们，call、apply和bind已经被手写了无数遍。也许本文中手写的版本是无数个前辈们写过的某个版本，但是有一点不同的是，本文会告诉你为什么要这样写，让你搞懂了再写。

在《你不知道的JavaScript上卷》第二部分的第1章和第2章，用了2章斤30页的篇幅中详细地介绍了this的内容，已经充分说明了this的重要性和应用场景的复杂性。

而我们要实现的call、apply和bind最为人所知的功能就是使用指定的thisArg去调用函数，使得函数可以使用我们指定的thisArg作为它运行时的上下文。

《你不知道的JavaScript》总结了四条规则来判断一个运行中函数的this到底是绑定到哪里：

1. 由 new 调用？绑定到新创建的对象。
2. 由 call 或者 apply （或者 bind ）调用？绑定到指定的对象。
3. 由上下文对象调用？绑定到那个上下文对象。
4. 默认：在严格模式下绑定到 undefined ，否则绑定到全局对象。

更具体一点，可以描述为：

1. 函数是否在 new 中调用（ new 绑定）？如果是的话 this 绑定的是新创建的对象：

var bar = new foo()复制代码

2. 函数是否通过 call 、 apply （显式绑定）或者硬绑定（bind）调用？如果是的话， this 绑定的是指定的对象:

var bar = foo.call(obj2)复制代码

3. 函数是否在某个上下文对象中调用（隐式绑定）？如果是的话， this 绑定的是那个上下文对象:

var bar = obj1.foo()复制代码

4. 如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到 undefined ，否则绑定到全局对象:

var bar = foo()复制代码

就是这样。对于正常的函数调用来说，理解了这些知识你就可以明白 this 的绑定原理了。

至此，你已经搞明白了this的全部绑定规则，而我们要去手写实现的call、apply和bind只是其中的一条规则（第2条），因此，我们可以在另外3条规则的基础上很容易地组织代码实现。

4.1 call和apply

实现call和apply的通常做法是使用“隐式绑定”的规则，只需要绑定thisArg对象到指定的对象就好了，即：使得函数可以在指定的上下文对象中调用：

const context = {
    name: 'ZhangSan'
}
function sayName () {
    console.log(this.name)
}
context.sayName = sayName
context.sayName() // ZhangSan复制代码

这样，我们就完成了“隐式绑定”。落实到具体的代码实现上：

/**
* @param {context} Object 
* @param {arg1, arg2, ...} 指定的参数列表
*/
Function.prototype.call = function (context, ...args) {
    // 指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装
    if (context === null || context === undefined) {
        context = window
    } else if (typeof context !== 'object') {
        context = new context.constructor(context)
    } else {
        context = context
    }
    const func = this
    const fn = Symbol('fn')
    context[fn] = func
    const result = context[fn](...args)
    delete context[fn]
    return result
}

/**
* @param {context}
* @param {args} Array 参数数组
*/
Function.prototype.apply = function (context, args) {
    // 和call一样的原理
    if (context === null || context === undefined) {
        context = window
    } else if (typeof context !== 'object') {
        context = new context.constructor(context)
    } else {
        context = context
    }
    const fn = Symbol('fn')
    const func = this
    context[fn] = func
    const result = context[fn](...args)
    delete context[fn]
    return result
}复制代码

细看下来，大家都那么聪明，肯定一眼就看到了它们的精髓所在：

const fn = Symbol('fn')
const func = this
context[fn] = func复制代码

在这里，我们使用Symbol('fn')作为上下文对象的键，对应的值指向我们想要绑定上下文的函数this（因为我们的方法是声明在Function.prototype上的），而使用Symbol(fn)作为键名是为了避免和上下文对象的其他键名冲突，从而导致覆盖了原有的属性键值对。

4.2 bind

在《你不知道的JavaScript》中，手动实现了一个简单版本的bind函数，它称之为“硬绑定”：

function bind(fn, obj) {
    return function() {
        return fn.apply( obj, arguments );
    };
}复制代码

硬绑定的典型应用场景就是创建一个包裹函数，传入所有的参数并返回接收到的所有值。

由于硬绑定是一种非常常用的模式，所以在 ES5 中提供了内置的方法 Function.prototype.bind ，它的用法如下：

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

var obj = {
    a:2
}

var bar = foo.bind( obj )

var b = bar( 3 ); // 2 3

console.log( b ); // 5复制代码

bind(..) 会返回一个硬编码的新函数，它会把参数设置为 this 的上下文并调用原始函数。

MDN是这样描述bind方法的：bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

因此，我们可以在此基础上实现我们的bind方法：

/**
* @param {context} Object 指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装
*
* @param {arg1, arg2, ...} 指定的参数列表
*
* 如果 bind 函数的参数列表为空，或者thisArg是null或undefined，执行作用域的 this 将被视为新函数的 thisArg
*/
Function.prototype.bind = function (context, ...args) {
    if (typeof this !== 'function') {
        throw new TypeError('必须使用函数调用此方法');
    }
    const _self = this

    // fNOP存在的意义：
    //  1. 判断返回的fBound是否被new调用了，如果是被new调用了，那么fNOP.prototype自然是fBound()中this的原型
    //  2. 使用包装函数（_self）的原型对象覆盖自身的原型对象，然后使用new操作符构造出一个实例对象作为fBound的原型对象，从而实现继承包装函数的原型对象
    const fNOP = function () {}

    const fBound = function (...args2) {

        // fNOP.prototype.isPrototypeOf(this) 为true说明当前结果是被使用new操作符调用的，则忽略context
        return _self.apply(fNOP.prototype.isPrototypeOf(this) && context ? this : context, [...args, ...args2])
    }

    // 绑定原型对象
    fNOP.prototype = this.prototype
    fBound.prototype = new fNOP()
    return fBound
}复制代码

具体的实现细节都标注了对应的注释，涉及到的原理都有在上面的内容中讲到，也算是一个总结和回顾吧。

五、函数柯里化

维基百科：柯里化，英语：Currying，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术 。

看这个解释有一点抽象，我们就拿被做了无数次示例的add函数，来做一个简单的实现：

// 普通的add函数
function add(x, y) {
    return x + y
}

// Currying后
function curryingAdd(x) {
    return function (y) {
        return x + y
    }
}

add(1, 2)           // 3
curryingAdd(1)(2)   // 3复制代码

实际上就是把add函数的x，y两个参数变成了先用一个函数接收x然后返回一个函数去处理y参数。现在思路应该就比较清晰了，就是只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。

函数柯里化在一定场景下，有很多好处，如：参数复用、提前确认和延迟运行等，具体内容可以拜读下这篇文章，个人觉得受益匪浅。

最简单的实现函数柯里化的方式就是使用Function.prototype.bind，即：

function curry(fn, ...args) {
    return fn.length <= args.length ? fn(...args) : curry.bind(null, fn, ...args);
}复制代码

如果用ES5代码实现的话，会比较麻烦些，但是核心思想是不变的，就是在传递的参数满足调用函数之前始终返回一个需要传参剩余参数的函数：

// 函数柯里化指的是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。
function curry(fn, args) {
    args = args || []

    // 获取函数需要的参数长度
    let length = fn.length
    return function() {
        let subArgs = args.slice(0)

        // 拼接得到现有的所有参数
        for (let i = 0; i < arguments.length; i++) {
        subArgs.push(arguments[i])
        }

        // 判断参数的长度是否已经满足函数所需参数的长度
        if (subArgs.length >= length) {
            // 如果满足，执行函数
            return fn.apply(this, subArgs)
        } else {
            // 如果不满足，递归返回科里化的函数，等待参数的传入
            return curry.call(this, fn, subArgs)
        }
    };
}复制代码

六、文末总结

在本文中，我们熟悉了new的底层执行原理、instanceof和原型链直接的密切关系、Object.create()是如何实现的原型链指定以及JavaScript中最复杂最难搞定的this的绑定问题。

当然，在《你不知道的JavaScript》中还有很多精妙的见解和知识内容，如"JavaScript是需要先编译再执行的"、"面相对象编程只是JavaScript中的一种设计模式"等等独到的见解和观点。墙裂推荐大家多读几遍，每一遍都会有不同的收获。

相关免费学习推荐：JavaScript（视频）

위 내용은 당신이 모르는 자바스크립트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!