JavaScript中new操作符和Object.create()的原理

singerye 发布于2019-08-23 12:08 / 3476人阅读

摘要：主要过程如下创建一个空对象将该空对象的原型设置为构造函数的原型，即以该对象为上下文执行构造函数，即返回该对象，即。

new

new func()主要过程如下：

创建一个空对象obj；

将该空对象的原型设置为构造函数的原型，即obj.__proto__ = func.prototype；

以该对象为上下文执行构造函数，即func.call(obj)；

返回该对象，即return obj。

对于第3、4步还有个小细节，如果第3步func有返回值且返回值为对象，则第4步会返回func的返回值，反之则默认返回obj。

模仿new原理的代码如下：

function new2(func) { // func为某个构造函数
  var createObject = Object.create(func.prototype); // 以构造函数的原型对象为原型，创建一个空对象，即创建一个{ __proto__: func.prototype }
  var returnObject = func.call(createObject); // 使用刚创建的空对象作为上下文(this)执行构造函数
  if (typeof returnObject === "object") { // 若构造函数有返回对象，则返回该对象
    return returnObject;
  } else { // 若构造函数未返回对象，则返回Object.create创建的对象
    return createObject;
  }
};

Object.create()

在模仿new原理的代码中用到了Object.create()，它的作用是以入参为原型创建一个空对象，即

Object.create = function (obj) {
  return { "__proto__": obj};
};

或

Object.create = function (obj) {
  function F() {}
  F.prototype = obj;
  return new F();
};

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97986.html

前端进击的巨人（七）：走进面向对象，原型与原型链，继承方式

摘要：除了以上介绍的几种对象创建方式，此外还有寄生构造函数模式稳妥构造函数模式。 showImg(https://segmentfault.com/img/remote/1460000018196128); 面向对象是以对象为中心的编程思想，它的思维方式是构造。面向对象编程的三大特点：封装、继承、多态：封装：属性方法的抽象继承：一个类继承（复制）另一个类的属性/方法多态：方...

wums 2019-08-23 15:18 评论0 收藏0
深入 JavaScript 原型继承原理——babel 编译码解读

摘要：目录无继承简单的字段声明无继承简单的方法声明简单继承一层继承字段覆盖无继承静态函数无继承静态变量神秘的类无继承简单的字段声明先来看个最简单的例子，我们仅仅使用了关键字并定义了一个变量最后编译出来的代码如下。无继承静态变量还有个小例子。在[上一篇文章][]中，我们提到 ES6 的 class 语法糖是个近乎完美的方案，并且讲解了实现继承的许多内部机制，如 prototype/__pro...

stdying 2019-08-23 12:35 评论0 收藏0
JavaScript常用的继承方式

摘要：常用继承方式主要分为种原型链继承构造函数继承组合继承原型式继承寄生式继承寄生组合继承以及继承多个对象。所以说，构造函数基础只能继承父类的实例属性和方法，不能继承原型链上的属性和方法。 JavaScript常用继承方式主要分为(7种)：原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承以及继承多个对象。 1：原型链继承(核心：将父类的实例作为子类的原型) 基本概念：...

zhangfaliang 2019-08-26 10:15 评论0 收藏0
面向对象的小九九

摘要：由构造函数返回的对象就是表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤创建的对象。运算符返回一个布尔值，表示对象是否为某个构造函数的实例。面向对象本人能力有限，有误请斧正本文旨在复习面向对象(不包含es6) 本文学习思维创建对象的方式，获取对象属性构造函数,构造函数的new 做了什么原型与原型对象原型链继承(借用构造继承、原型继承、组合继承、寄生组合继承)...

时飞 2019-08-22 18:16 评论0 收藏0
[译] 为什么原型继承很重要

摘要：使用构造函数的原型继承相比使用原型的原型继承更加复杂，我们先看看使用原型的原型继承上面的代码很容易理解。相反的，使用构造函数的原型继承像下面这样当然，构造函数的方式更简单。五天之前我写了一个关于ES6标准中Class的文章。在里面我介绍了如何用现有的Javascript来模拟类并且介绍了ES6中类的用法，其实它只是一个语法糖。感谢Om Shakar以及Javascript Room中...

xiao7cn 2019-08-21 10:27 评论0 收藏0