JavaScript核心原理解析
周爱民
《JavaScript语言精髓与编程实践》作者,南潮科技(Ruff)首席架构师
立即订阅
3627 人已学习
课程目录
已更新 21 讲 / 共 21 讲
0/3登录后,你可以任选3讲全文学习。
开篇词 (1讲)
开篇词 | 如何解决语言问题?
免费
从零开始:JavaScript语言是如何构建起来的 (5讲)
01 | delete 0:JavaScript中到底有什么是可以销毁的
02 | var x = y = 100:声明语句与语法改变了JavaScript语言核心性质
03 | a.x = a = {n:2}:一道被无数人无数次地解释过的经典面试题
04 | export default function() {}:你无法导出一个匿名函数表达式
05 | for (let x of [1,2,3]) ...:for循环并不比使用函数递归节省开销
从表达式到执行引擎:JavaScript是如何运行的 (6讲)
06 | x: break x; 搞懂如何在循环外使用break,方知语句执行真解
07 | `${1}`:详解JavaScript中特殊的可执行结构
08 | x => x:函数式语言的核心抽象:函数与表达式的同一性
09 | (...x):不是表达式、语句、函数,但它却能执行
10 | x = yield x:迭代过程的“函数式化”
11 | throw 1;:它在“最简单语法榜”上排名第三
从原型到类:JavaScript是如何一步步走向应用编程语言的 (6讲)
12 | 1 in 1..constructor:这行代码的结果值,既可能是true,也可能是false
13 | new X:从构造器到类,为你揭密对象构造的全程
14 | super.xxx():虽然直到ES10还是个半吊子实现,却也值得一讲
15 | return Object.create(new.target.prototype):做框架设计的基本功:写一个根类
16 | [a, b] = {a, b}:让你从一行代码看到对象的本质
17 | Object.setPrototypeOf(x, null):连Brendan Eich都认错,但null值还活着
不定期加餐 (3讲)
加餐 | 捡豆吃豆的学问(上):这门课讲的是什么?
免费
加餐 | 捡豆吃豆的学问(下):这门课该怎么学?
免费
加餐 | 让JavaScript运行起来
免费
JavaScript核心原理解析
登录|注册

13 | new X:从构造器到类,为你揭密对象构造的全程

周爱民 2019-12-13
你好,我是周爱民。
今天我只跟你聊一件事,就是 JavaScript 构造器。标题中的这行代码中规中矩,是我这个专栏题目列表中难得的正经代码。
NOTE:需要稍加说明的是:这行代码在 JavaScript 1.x 的某些版本或具体实现中是不能使用的。即使 ECMAScript ed1 开始就将它作为标准语法之一,当时也还有许多语言并不支持它。
构造器这个东西,是 JavaScript 中面向对象系统的核心概念之一。跟“属性”相比,如果属性是静态的结构,那么“构造器”就是动态的逻辑。
没有构造器的 JavaScript,就是一个充填了无数数据的、静态的对象空间。这些对象之间既没有关联,也不能衍生,更不可能发生交互。然而,这却真的就是 JavaScript 1.0 那个时代的所谓“面向对象系统”的基本面貌。

基于对象的 JavaScript

为什么呢?因为 JavaScript1.0 的时代,也就是最早最早的 JavaScript 其实是没有继承的。
你可能会说,既然是没有继承的,那么 JavaScript 为什么一开始就能声称自己是“面向对象”的、“类似 Java”的一门语言呢?其实这个讲法是前半句对,后半句不对。JavaScript 和 Java 名字相似,但语言特性却大是不同,这就跟北京的“海淀五路居”和“五路居”一样,差了得有 20 公里。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《JavaScript核心原理解析》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(5)

  • 行问
    谈谈今天的理解:

    在 instanceof 运算中,x instanceof AClass 表达式的右侧是一个类名(对于 instanceof 的理解之前是有误解,今天才领悟到)

    ECMAScript 6 的类是由父类或祖先类创建 this 实例的(也就是 this 是继承而来的,也能够契合前面说的”在调用结束之前,是不能使用 this 引用。不知道这个理解能否正确)

    作者回复: 这个this实例的确是由父类或祖先类创建的。但它不是“继承”来的,因为“继承”这个说法严格来说在JavaScript中就是原型继承,而这个this不是靠原型继承来“传递到”子类的。

    在super()调用之前,当前函数——例如子类的构造器——无法访问this,是它的作用域里面没有this这个名字(因为还没有被创建出来嘛)。而super()调用之后,JavaScript引擎会把this“动态地添加到”作用域中,于是this就能访问了。

    这个“动态的添加”其实很简单,因为super是子类向父类调用的,所以显然父类调用结束并退出时的当前作用域(或环境)就是子类的,因此ECMAScript约定在退出super()的时候就把已经创建好的this直接“抄写”给当前环境就可以了。这里大概只有一两行代码,很简单的。^^.

    2019-12-13
    2
  • 行问
    Object.create( )
    Object.defineProperty( )
    ES6 的 proxy 和 Reflect
    2019-12-13
    2
  • 潇潇雨歇
    ES6操作原型/原型链方法:Obejct.create()、Object.setPrototypeOf()、Object.getPrototypeOf()
    2019-12-17
    1
  • 潇潇雨歇
    1、Object.create()
    2019-12-16
  • sprinty

    function X() {
      this.x = 4
    }

    function Y() {
      this.y = 5
    }

    // Y.prototype = new X(), new 运算可以用以下三行模拟。
    var xxx = {}
    X.apply(xxx)
    xxx.__proto__ = X.prototype

    Y.prototype = xxx

    // var y = new Y()
    var y = {}
    Y.apply(y)
    y.__proto__ = Y.prototype
    2019-12-13
收起评论
5
返回
顶部