JavaScript深入之创建对象的多种方式以及优缺点 #15

mqyqingfeng · 2017-05-10T03:16:17Z

写在前面

这篇文章讲解创建对象的各种方式，以及优缺点。

但是注意：

这篇文章更像是笔记，因为《JavaScript高级程序设计》写得真是太好了！

1. 工厂模式

function createPerson(name) {
    var o = new Object();
    o.name = name;
    o.getName = function () {
        console.log(this.name);
    };

    return o;
}

var person1 = createPerson('kevin');

缺点：对象无法识别，因为所有的实例都指向一个原型

2. 构造函数模式

function Person(name) {
    this.name = name;
    this.getName = function () {
        console.log(this.name);
    };
}

var person1 = new Person('kevin');

优点：实例可以识别为一个特定的类型

缺点：每次创建实例时，每个方法都要被创建一次

2.1 构造函数模式优化

function Person(name) {
    this.name = name;
    this.getName = getName;
}

function getName() {
    console.log(this.name);
}

var person1 = new Person('kevin');

优点：解决了每个方法都要被重新创建的问题

缺点：这叫啥封装……

3. 原型模式

function Person(name) {

}

Person.prototype.name = 'keivn';
Person.prototype.getName = function () {
    console.log(this.name);
};

var person1 = new Person();

优点：方法不会重新创建

缺点：1. 所有的属性和方法都共享 2. 不能初始化参数

3.1 原型模式优化

function Person(name) {

}

Person.prototype = {
    name: 'kevin',
    getName: function () {
        console.log(this.name);
    }
};

var person1 = new Person();

优点：封装性好了一点

缺点：重写了原型，丢失了constructor属性

3.2 原型模式优化

function Person(name) {

}

Person.prototype = {
    constructor: Person,
    name: 'kevin',
    getName: function () {
        console.log(this.name);
    }
};

var person1 = new Person();

优点：实例可以通过constructor属性找到所属构造函数

缺点：原型模式该有的缺点还是有

4. 组合模式

构造函数模式与原型模式双剑合璧。

function Person(name) {
    this.name = name;
}

Person.prototype = {
    constructor: Person,
    getName: function () {
        console.log(this.name);
    }
};

var person1 = new Person();

优点：该共享的共享，该私有的私有，使用最广泛的方式

缺点：有的人就是希望全部都写在一起，即更好的封装性

4.1 动态原型模式

function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype.getName = function () {
            console.log(this.name);
        }
    }
}

var person1 = new Person();

注意：使用动态原型模式时，不能用对象字面量重写原型

解释下为什么：

function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype = {
            constructor: Person,
            getName: function () {
                console.log(this.name);
            }
        }
    }
}

var person1 = new Person('kevin');
var person2 = new Person('daisy');

// 报错 并没有该方法
person1.getName();

// 注释掉上面的代码，这句是可以执行的。
person2.getName();

为了解释这个问题，假设开始执行var person1 = new Person('kevin')。

如果对 new 和 apply 的底层执行过程不是很熟悉，可以阅读底部相关链接中的文章。

我们回顾下 new 的实现步骤：

首先新建一个对象
然后将对象的原型指向 Person.prototype
然后 Person.apply(obj)
返回这个对象

注意这个时候，回顾下 apply 的实现步骤，会执行 obj.Person 方法，这个时候就会执行 if 语句里的内容，注意构造函数的 prototype 属性指向了实例的原型，使用字面量方式直接覆盖 Person.prototype，并不会更改实例的原型的值，person1 依然是指向了以前的原型，而不是 Person.prototype。而之前的原型是没有 getName 方法的，所以就报错了！

如果你就是想用字面量方式写代码，可以尝试下这种：

function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype = {
            constructor: Person,
            getName: function () {
                console.log(this.name);
            }
        }

        return new Person(name);
    }
}

var person1 = new Person('kevin');
var person2 = new Person('daisy');

person1.getName(); // kevin
person2.getName();  // daisy

5.1 寄生构造函数模式

function Person(name) {

    var o = new Object();
    o.name = name;
    o.getName = function () {
        console.log(this.name);
    };

    return o;

}

var person1 = new Person('kevin');
console.log(person1 instanceof Person) // false
console.log(person1 instanceof Object)  // true

寄生构造函数模式，我个人认为应该这样读：

寄生-构造函数-模式，也就是说寄生在构造函数的一种方法。

也就是说打着构造函数的幌子挂羊头卖狗肉，你看创建的实例使用 instanceof 都无法指向构造函数！

这样方法可以在特殊情况下使用。比如我们想创建一个具有额外方法的特殊数组，但是又不想直接修改Array构造函数，我们可以这样写：

function SpecialArray() {
    var values = new Array();

    for (var i = 0, len = arguments.length; i < len; i++) {
        values.push(arguments[i]);
    }

    values.toPipedString = function () {
        return this.join("|");
    };
    return values;
}

var colors = new SpecialArray('red', 'blue', 'green');
var colors2 = SpecialArray('red2', 'blue2', 'green2');


console.log(colors);
console.log(colors.toPipedString()); // red|blue|green

console.log(colors2);
console.log(colors2.toPipedString()); // red2|blue2|green2

你会发现，其实所谓的寄生构造函数模式就是比工厂模式在创建对象的时候，多使用了一个new，实际上两者的结果是一样的。

但是作者可能是希望能像使用普通 Array 一样使用 SpecialArray，虽然把 SpecialArray 当成函数也一样能用，但是这并不是作者的本意，也变得不优雅。

在可以使用其他模式的情况下，不要使用这种模式。

但是值得一提的是，上面例子中的循环：

for (var i = 0, len = arguments.length; i < len; i++) {
    values.push(arguments[i]);
}

可以替换成：

values.push.apply(values, arguments);

5.2 稳妥构造函数模式

function person(name){
    var o = new Object();
    o.sayName = function(){
        console.log(name);
    };
    return o;
}

var person1 = person('kevin');

person1.sayName(); // kevin

person1.name = "daisy";

person1.sayName(); // kevin

console.log(person1.name); // daisy

所谓稳妥对象，指的是没有公共属性，而且其方法也不引用 this 的对象。

与寄生构造函数模式有两点不同：

新创建的实例方法不引用 this
不使用 new 操作符调用构造函数

稳妥对象最适合在一些安全的环境中。

稳妥构造函数模式也跟工厂模式一样，无法识别对象所属类型。

下一篇文章

JavaScript深入之继承的多种方式和优缺点

深入系列

JavaScript深入系列目录地址：https://github.com/mqyqingfeng/Blog。

JavaScript深入系列预计写十五篇左右，旨在帮大家捋顺JavaScript底层知识，重点讲解如原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念。

如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎star，对作者也是一种鼓励。

The text was updated successfully, but these errors were encountered:

xumengzi · 2017-06-08T13:04:07Z

消灭零回复！

mqyqingfeng · 2017-06-08T13:09:53Z

@JarvenIV 哈哈，(๑•̀ㅂ•́)و✧

liuxinqiong · 2017-06-30T02:18:26Z

感觉特么都有缺点啊

mqyqingfeng · 2017-06-30T04:14:19Z

@liuxinqiong 确实如此哈，一般都是用组合模式

ry928330 · 2017-08-28T12:46:38Z

@mqyqingfeng 你好，想请问你两个问题：一个是：4.1动态原型的模式，“使用字面量方式直接覆盖 Person.prototype，并不会更改实例的原型的值”这是为什么？另一个是5.1 寄生构造函数模式，在调用的时候和工厂模式相比，就多了一个new调用，这个有什么用？

mqyqingfeng · 2017-08-29T02:16:47Z

@ry928330

function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype = {
            constructor: Person,
            getName: function () {
                console.log(this.name);
            }
        }
    }
}

var person1 = new Person('kevin');

以这个例子为例，当执行 var person1 = new Person('kevin') 的时候，person1.的原型并不是指向 Person.prototype，而是指向 Person.prototype 指向的原型对象，我们假设这个原型对象名字为 O, 然后再修改 Person.prototype 的值为一个字面量，只是将一个新的值赋值给 Person.prototype, 并没有修改 O 对象，也不会切断已经建立的 person1 和 O 的原型关系，访问 person.getName 方法，依然会从 O 上查找

mqyqingfeng · 2017-08-29T02:23:44Z

@ry928330 关于寄生构造函数模式的使用，例子中也有讲到，你可以理解为这个人就是想用 new 的方式而不是直接调用函数 😂

ry928330 · 2017-08-29T07:13:01Z

@mqyqingfeng 那现在怎么通过Person再找回原来的prototype（也就是O）呢，因为像这样
function Person(name) {
this.name = name;
}
var person1 = new Person('kevin');
person1.proto === Person.prototype //true
现在给Person.prototype重新赋值为一个字面量后，person1.proto === Person.prototype 肯定是false，那还能从Person这个构造函数（对象），找到原来的prototype么（也就是O）？

ry928330 · 2017-08-29T07:13:08Z

@mqyqingfeng 那现在怎么通过Person再找回原来的prototype（也就是O）呢，因为像这样
function Person(name) {
this.name = name;
}
var person1 = new Person('kevin');
person1.proto === Person.prototype //true
现在给Person.prototype重新赋值为一个字面量后，person1.proto === Person.prototype 肯定是false，那还能从Person这个构造函数（对象），找到原来的prototype么（也就是O）？

mqyqingfeng · 2017-08-29T07:47:05Z

@ry928330 不能啦~

qujsh · 2017-11-13T08:37:49Z

function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype = {
            constructor: Person,
            getName: function () {
                console.log(this.name);
            }
        }
    }
}

var person1 = new Person('kevin');

当执行 var person1 = new Person('kevin') 的时候，person1.的原型并不是指向 Person.prototype，而是指向 Person.prototype 指向的原型对象

对这句话其实不是很理解，为什么指向了Person.prototype指向的原型对象？
还有上文的一句话：
回顾下 apply 的实现步骤，会执行 obj.Person 方法，这个时候就会执行 if 语句里的内容，注意构造函数的 prototype 属性指向了实例的原型。
我脑子里的印象还是，person1.__proto__ = Person.prototype;

mqyqingfeng · 2017-11-15T10:15:14Z

@qujsh 原型也是一个对象，我们假设这个对象叫做 O，看这个例子：

var a = {
     b: O
}

你看 a.b 指向了 O 对象，就相当于 Person.prototype 指向了原型对象这句话。

再看这个例子：

function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype = {
            constructor: Person,
            getName: function () {
                console.log(this.name);
            }
        }
    }
}

var person1 = new Person('kevin');

当 new Person() 的时候，是先建立的原型关系，即 person .__proto__ = Person.prototype，而后修改了 Person.prototype 的值，这就相当于：

// O 表示原型对象
var O = {};

var a = {
     b: O
}

先建立原型关系，指的是 c.__proto__ = a.b = O

而后修改 Person.prototype 的值，相当于

var anotherO = {};
a.b = anotherO;

即便修改了 Person.prototype 的值，但是 c.__proto__ 还是指向以前的 O

不知道这样解释的清不清楚，欢迎交流~

yan919 · 2017-11-18T07:34:44Z

请问组合模式哪些方法和属性写在prototype,哪些写在构造函数里

mqyqingfeng · 2017-11-20T02:19:13Z

@monkeySmoke 共享的写在 prototype 中，独立的写在构造函数中。

我们以弹窗组件举个例子：

function Dialog(options) {
   this.options = options;
}

Dialog.prototype.show = function(){...}

如果我们一个页面用到多个 dialog：

var dialog1 = new Dialog({value: 1});
var dialog2  = new Dialog({value: 2});

dialog1 和 dialog2 传入的参数不一样，写在构造函数中，我们可以通过

console.log(dialog1.options) 访问 dialog1 的配置选项

而对于 show 方法而言，所以的 dialog 都是公用的，所以写在 prototype 属性中

MagicHacker · 2018-02-05T03:26:44Z

第二个原型模式优化的内容，如果把新建对象放在用对象字面量重写原型对象之前，再调用原型上的方法就会报错。

function Person(){}

var person_1 = new Person();

Person.prototype = {
   constructor:Person,
   name:'Joe',
   getName : function(){
      console.log(this.name);
   }
}
person_1.getName(); //error

mqyqingfeng · 2018-02-08T10:05:20Z

@MagicHacker 这是肯定的呀，因为当你第一次 new 的时候，person_1 的原型指向了 Person.prototype 所指向的那个对象，后来再修改 Person.prototype，只会使得以后 new 的对象指向这个新的 Person.prototype，已经 new 的不会再发生改变~

geekzhanglei · 2018-02-26T08:39:29Z

谢谢作者。关于重写原型的问题，还是要好好看js高程p156-“原型的动态性”一节的，其中P157图6-3对更好理解字面量重写原型导致的原型链变化有帮助，结合图和new操作符的第二步与重写原型的先后关系就理解了这个问题。

Tan90Qian · 2018-05-01T06:58:40Z

在《你不知道的JavaScript（上卷）》中，提到了一种被作者称为“面向委托”的设计思路，即：

Foo = {
  init: function(who) {
  this.me = who; },
  identify: function() {
    return "I am " + this.me;
  } 
};
Bar = Object.create( Foo );
Bar.speak = function() {
  alert( "Hello, " + this.identify() + "." );
};
var b1 = Object.create( Bar );
b1.init( "b1" );
var b2 = Object.create( Bar );
b2.init( "b2" );
b1.speak();
b2.speak();

作者认为在js中不存在“类”且“原型链”是引用而不是复制的情况下，强行使用“类”的设计思路会导致一些的问题，然后使用了这种“纯对象”的形式。
从作者给的思维模型图上看，似乎这种设计模式更加简洁易懂，为何不管是日常开发还是面试中，似乎都没见过这种风格的？它有什么致命缺陷么？还是要调整整个团队的习惯得不偿失？

jgchenu · 2018-06-05T09:11:30Z

从深入第一篇看到这里即将完结，必须给大大点个赞！狂赞一下！写得太好看了，我在坐地铁还有睡觉前，手机微信网页都是置顶大大的博客来看的❤️❤️❤️

easyhaloo · 2018-06-07T07:16:50Z

博主我可以不可以这样理解person1.proto = Person.prototype 这句话就相当于person1.proto 指向了Person.prototype 指向的一块区域，当Person.prototype 以字面量的形式更改的时候，原来的那块区域并没有发生变化。感觉之前看:
person1.的原型并不是指向 Person.prototype，而是指向 Person.prototype 指向的原型对象
这句话都有点迷糊，这样理解是不是要好点

alex1504 · 2018-06-21T07:43:25Z

@qujsh

和你一样，一开始也觉得这句话是在难以理解。

“当执行 var person1 = new Person('kevin') 的时候，person1.的原型并不是指向 Person.prototype，而是指向 Person.prototype 指向的原型对象“

后来想想，其实重点在js创建一个对象时是先建立原型关系，而后执行构造函数才是这个问题的核心。

“当 new Person() 的时候，是先建立的原型关系，即 person .proto = Person.prototype，而后修改了 Person.prototype 的值”

画图理解一下就很清晰：

初始先存在constructor关系线和1关系线。

var person1 = new Person('kevin');

由于new Person()先建立原型关系导致了关系2的生成，然后覆盖了构造函数指向了原型之后，关系1移除，关系3生成。

var person2 = new Person('daisy');

在person1生成后由于关系3替代了关系1，所以在person2生成时同时生成了关系4（即person2的__proto__指向了新的原型对象），所以person2能找到新的原型对象上的方法。

当person1和person2生成后的最终关系图

Xing-He · 2018-09-17T15:54:24Z

@mqyqingfeng 不知道对于这个 示例 4.1 的理解是否正确，还望能指出

function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype = {
            constructor: Person,
            getName: function () {
                console.log(this.name);
            }
        }
    }
}

var person1 = new Person('kevin');
var person2 = new Person('daisy');

// 报错 并没有该方法
person1.getName();

// 注释掉上面的代码，这句是可以执行的。
person2.getName();

个人对于原文这个示例的理解：

讨论中有个示例图，解释的比较清楚的一点是：js创建一个对象时是 先建立原型关系，而 后执行构造函数
那么在 第一个 var person1= new Person('Kevin') 调用的时候，函数(类)的 Person.prototype 还并没有被修改，然后再执行类似 Person.apply(obj) 的操作，在这个apply操作中，构造被执行，那么 if 里边的内容被执行，然后 Person.prototype 才被修改，指向新的一个字面量对象，
重点是，这个时候 person1 的原型还是指向的被 修改之前 的 Person.prototype，而在第二次 var person2 = new Person('Daisy') 的时候，Person.prototype 已经被修改，因此 person1 原型上是没有 getName，而 person2 可以正常调用

itsuki0927 · 2019-07-26T07:50:31Z

动态原型模式为什么不能用字面量直接赋值，以下是我的理解：
举一个简单的例子：

let obj = {
    name: "obj"
};
let per = obj;
obj = {
    age: 20
};
// obj { age:20 }
// per { name:"obj" }

引用《你不知道的JS》中的一句话，更好的进行理解：

JavaScript中引用指向的是值。
简单值（null、undefined、字符串、数字、布尔和 ES6 中的 symbol）是通过值的复制。
而对象和函数则是通过引用的复制。

所以在上述例子中：
per和obj都指向了值 { name:'obj' }，然后又将obj重新赋值，由于引用指向的是值本身，也就是值{ name:'obj' }，而不是per和obj变量，所以obj的重新赋值无法更改per引用的指向，所以结果如最后所示。

回到这个例子当中：
假设 Person.prototype就是上述例子的obj，new出来的实例对象是per。

new 操作符会在内部绑定其对应的原型对象就是类似于上述例子中per = obj，
然后在函数中给Person.prototype进行重新赋值，类似于上述例子中的obj = { age:10 }
此时实例对象per的指向的原型对象还是没有变的，它还是原来的那个{ name:"obj" }，在上面没有getName这个方法，所以就会出现getName is not defined的异常。

qiqingfu · 2019-08-12T14:30:48Z

@mqyqingfeng @mqyqingfeng 你好，想请问你两个问题：一个是：4.1动态原型的模式，“使用字面量方式直接覆盖 Person.prototype，并不会更改实例的原型的值”这是为什么？另一个是5.1 寄生构造函数模式，在调用的时候和工厂模式相比，就多了一个new调用，这个有什么用？

4.1动态原型的模式

let obj = {
        a: 1
    }

  let prosen = obj
  obj = {
    a: 2
  }
      console.log(prosen) // {a: 1}
      console.log(obj) // {a: 2}

在堆内存中又开辟了一片空间, 切断了和之前的引用关系吗?

superwtt · 2019-11-10T05:22:17Z

@qujsh

和你一样，一开始也觉得这句话是在难以理解。

“当执行 var person1 = new Person('kevin') 的时候，person1.的原型并不是指向 Person.prototype，而是指向 Person.prototype 指向的原型对象“

后来想想，其实重点在js创建一个对象时是先建立原型关系，而后执行构造函数才是这个问题的核心。

“当 new Person() 的时候，是先建立的原型关系，即 person .proto = Person.prototype，而后修改了 Person.prototype 的值”

画图理解一下就很清晰：

初始先存在constructor关系线和1关系线。
var person1 = new Person('kevin');
由于new Person()先建立原型关系导致了关系2的生成，然后覆盖了构造函数指向了原型之后，关系1移除，关系3生成。
var person2 = new Person('daisy');
在person1生成后由于关系3替代了关系1，所以在person2生成时同时生成了关系4（即person2的__proto__指向了新的原型对象），所以person2能找到新的原型对象上的方法。

当person1和person2生成后的最终关系图

谢谢大佬的图，一下子理解了，但还是想问一下：
第一次new Person()生成关系网络的时候，this指代的是实例person1, 这个时候进入判断语句this.getName相当于person1.getName，为什么打印是undefined，而下面person1.getName()的时候直接报错？
我理解的是，程序在进入if语句的时候，实例找不到getName属性就应该直接报错，而不是变成undefined
求问大神怎么理解。

luohong123 · 2019-12-31T10:10:57Z

《JavaScript高级程序设计》得反反复复看啊，一看就会，一写就忘 😄

OldDream · 2020-04-02T11:47:05Z

”这是为什么

第一个问题，我认为用类似C的指针来理解比较容易，虽然js里面似乎没有指针的概念。
构造函数中的prototype指向内存地址A，而Person.prototype = {} 赋值后指向地址B，两者其实不会相互影响。

zhtzjz · 2020-06-25T10:48:32Z

看到作者这边文章，拿起了我尘封多年的javascript高级程序设计

xsfxtsxxr · 2020-07-02T02:58:47Z

寄生构造函数模式和工厂模式有啥区别，就是一个用new，一个不用new?

puck1006 · 2020-07-13T23:31:06Z

@qujsh
和你一样，一开始也觉得这句话是在难以理解。
“当执行 var person1 = new Person('kevin') 的时候，person1.的原型并不是指向 Person.prototype，而是指向 Person.prototype 指向的原型对象“
后来想想，其实重点在js创建一个对象时是先建立原型关系，而后执行构造函数才是这个问题的核心。
“当 new Person() 的时候，是先建立的原型关系，即 person .proto = Person.prototype，而后修改了 Person.prototype 的值”
画图理解一下就很清晰：

初始先存在constructor关系线和1关系线。
var person1 = new Person('kevin');
由于new Person()先建立原型关系导致了关系2的生成，然后覆盖了构造函数指向了原型之后，关系1移除，关系3生成。
var person2 = new Person('daisy');
在person1生成后由于关系3替代了关系1，所以在person2生成时同时生成了关系4（即person2的__proto__指向了新的原型对象），所以person2能找到新的原型对象上的方法。
当person1和person2生成后的最终关系图
谢谢大佬的图，一下子理解了，但还是想问一下：
第一次new Person()生成关系网络的时候，this指代的是实例person1, 这个时候进入判断语句this.getName相当于person1.getName，为什么打印是undefined，而下面person1.getName()的时候直接报错？
我理解的是，程序在进入if语句的时候，实例找不到getName属性就应该直接报错，而不是变成undefined
求问大神怎么理解。

Javascript是动态类型语言。点就定义了，只是没赋值，所以是undefined。undefined不是一个函数，所以调用报错

liyanana · 2020-11-13T16:42:32Z

每次看都有新收获

cw84973570 · 2020-12-10T09:09:59Z

function Person(name) {
    this.name = name || 'keivn';
}

// 私有属性放到实例里
// Person.prototype.name = 'keivn';
Person.prototype.getName = function () {
    console.log(this.name);
};

var person1 = new Person();

请问原型模式这样写有什么问题吗？跟其他的原型模式相比有什么优缺点？还是说这个name属性是作为公有属性的？

anjina · 2020-12-10T14:25:50Z

function Person(name) {
    this.name = name || 'keivn';
}

// 私有属性放到实例里
// Person.prototype.name = 'keivn';
Person.prototype.getName = function () {
    console.log(this.name);
};

var person1 = new Person();
请问原型模式这样写有什么问题吗？跟其他的原型模式相比有什么优缺点？还是说这个name属性是作为公有属性的？

你这是组合模式把，构造函数里面的 name 是每个实例对象的属性，而原型上定义的才是实例对象共享的

cw84973570 · 2020-12-12T05:59:22Z

function Person(name) {
    this.name = name || 'keivn';
}

// 私有属性放到实例里
// Person.prototype.name = 'keivn';
Person.prototype.getName = function () {
    console.log(this.name);
};

var person1 = new Person();
请问原型模式这样写有什么问题吗？跟其他的原型模式相比有什么优缺点？还是说这个name属性是作为公有属性的？
你这是组合模式把，构造函数里面的 name 是每个实例对象的属性，而原型上定义的才是实例对象共享的

@anjina 为什么文章里的组合模式要修改整个原型呢？在我的理解里最后实现的效果好像没区别，还是说两个写法都行？

又看了一遍，发现文章中说修改整个原型封装性会好点。。。。。

cw84973570 · 2020-12-15T01:56:07Z

请问第一个例子工厂模式，缺点是对象无法识别，我是这样理解，因为返回的是Object创建的对象，所以实例对象不能通过constructor找到对应的构造函数，但是你说的是因为所有的实例都指向同一个原型对象，能详细说下嘛

大概是如果var o = new Object()不做修改的话，不管是createPeople还是createPerson所创建的实例都是指向同一个原型，即对象o的原型永远指向Object.prototype.

haohongyang1 · 2020-12-20T11:20:44Z

这个文章是在讲js继承吗

fatFire · 2021-03-14T14:00:04Z

function person(name){
    var o = new Object();
    o.sayName = function(){
        console.log(name);
    };
    return o;
}

var person1 = person('kevin');

person1.sayName(); // kevin

person1.name = "daisy";

person1.sayName(); // kevin

console.log(person1.name); // daisy

稳妥稳妥构造函数模式是不是sayName 这个函数在创建时作用域里保存了person函数的AO 所以每次调用都是kevin

ConanLF · 2021-06-16T02:05:47Z

关于4.1的Person.prototype复写的理解:
//设地址是0x1234
var o = {
value: 1
}
//a.b指向0x1234
var a = {
b:o
}
var c = {}
//c.d指向a.b指向的地址即0x1234
c.d = a.b
//设地址0x4321
var x = {
value: 2
}
//a.b指向新地址0x4321
a.b = x
//c.d地址是0x1234, a.b地址是0x4321
console.log(c.d === a.b) // false

把a.b换成Person.prototype, c.d换成person1.proto, o就是原来的原型实例, x就是复写的字面量
这样理解对不对

xiaqingping · 2021-08-16T02:54:59Z

稳妥构造函数模式和工厂模式我咋就看着一样呢，区别在哪

wangxiaotian · 2022-03-07T06:42:53Z

@mqyqingfeng
关于4.1看楼主解释和评论区好像明白了，但还有个困惑

`function Person(name) {
this.name = name;
}

Person.prototype = {
constructor: Person,
getName: function () {
console.log(this.name);
}
};
var person1 = new Person();`

4.0例子里边添加原型的时候也是重写的，为啥这个的实例原型和原构造函数原型没有断掉呢？
没看4.1的时候，看4.0是山；看了4.1，感觉4.0不是山了！

axiaoha · 2022-04-21T12:36:19Z

@qujsh 原型也是一个对象，我们假设这个对象叫做 O，看这个例子：
var a = {
     b: O
}
你看 a.b 指向了 O 对象，就相当于 Person.prototype 指向了原型对象这句话。

再看这个例子：
function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype = {
            constructor: Person,
            getName: function () {
                console.log(this.name);
            }
        }
    }
}

var person1 = new Person('kevin');
当 new Person() 的时候，是先建立的原型关系，即 person .proto = Person.prototype，而后修改了 Person.prototype 的值，这就相当于：
// O 表示原型对象
var O = {};

var a = {
     b: O
}
先建立原型关系，指的是 c.proto = a.b = O

而后修改 Person.prototype 的值，相当于
var anotherO = {};
a.b = anotherO;
即便修改了 Person.prototype 的值，但是 c.proto 还是指向以前的 O

不知道这样解释的清不清楚，欢迎交流~

function Person(name) {
   this.name = name
}

Person.prototype.getName = function () {
   console.log(this.name);
};
var person1 = new Person('kevin');
Person.prototype = {
   getName : 1
}
console.log(person1.__proto__);
console.log(person1.getName);
var person2 = new Person('kevin');
console.log(person2.__proto__);
console.log(person2.getName);

liynxy · 2022-07-09T05:12:39Z

@mqyqingfeng 不知道对于这个 示例 4.1 的理解是否正确，还望能指出
function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype = {
            constructor: Person,
            getName: function () {
                console.log(this.name);
            }
        }
    }
}

var person1 = new Person('kevin');
var person2 = new Person('daisy');

// 报错 并没有该方法
person1.getName();

// 注释掉上面的代码，这句是可以执行的。
person2.getName();
个人对于原文这个示例的理解：

讨论中有个示例图，解释的比较清楚的一点是：js创建一个对象时是 先建立原型关系，而 后执行构造函数
那么在 第一个 var person1= new Person('Kevin') 调用的时候，函数(类)的 Person.prototype 还并没有被修改，然后再执行类似 Person.apply(obj) 的操作，在这个apply操作中，构造被执行，那么 if 里边的内容被执行，然后 Person.prototype 才被修改，指向新的一个字面量对象，
重点是，这个时候 person1 的原型还是指向的被 修改之前 的 Person.prototype，而在第二次 var person2 = new Person('Daisy') 的时候，Person.prototype 已经被修改，因此 person1 原型上是没有 getName，而 person2 可以正常调用

我的理解是，实例是在原型重写之前还是之后创建的问题。

创建 person1 实例的时候，关联的是最初的原型，然后原型就被重写了。

但在创建 person2 的时候，关联的就是重写之后的原型了。

而后面通过 return new Person(name) 这种方式来解决，其实就是在重写原型之后，再重新创建实例，这时候的实例关联的就是重写之后的原型。

Jamartin-create · 2022-10-12T07:50:50Z

这个应该改成Array.push.apply(values, arguments); 吧

DaphnisLi · 2022-11-24T02:40:53Z

怎么感觉在讲继承似的

tinyblckc0000al · 2024-03-21T13:12:35Z

@mqyqingfeng 关于4.1看楼主解释和评论区好像明白了，但还有个困惑

`function Person(name) { this.name = name; }

Person.prototype = { constructor: Person, getName: function () { console.log(this.name); } }; var person1 = new Person();`

4.0例子里边添加原型的时候也是重写的，为啥这个的实例原型和原构造函数原型没有断掉呢？没看4.1的时候，看4.0是山；看了4.1，感觉4.0不是山了！

4.0添加原型是在构造函数外添加的，只会执行一次，可以看成定义而不是重写，所有构造出来的对象实例引用的prototype都是同一个。
而4.1是每次构造函数都会执行，所以旧的对象所引用的prototype会因为新的对象构造过程而被覆盖。

mqyqingfeng added the 深入系列 label May 10, 2017

This was referenced May 23, 2017

JavaScript深入之类数组对象与arguments #14

Open

JavaScript深入之继承的多种方式和优缺点 #16

Open

JavaScript深入系列15篇正式完结！ #17

Open

This was referenced May 26, 2017

JavaScript深入之继承的多种方式和优缺点 yy9306/yy9306.github.io#11

Open

JavaScript深入之类数组对象与arguments yy9306/yy9306.github.io#12

Open

AngellinaZ mentioned this issue Feb 22, 2018

学习总结の创建对象 AngellinaZ/learn#7

Open

wolfdu mentioned this issue Mar 7, 2018

前端基础技能之JavaScript wolfdu/Blog#35

Open

chenshuhong mentioned this issue Aug 22, 2019

JavaScript深入之创建对象,继承的多种方式以及优缺点 chenshuhong/fullstack#3

Open

Nealyang mentioned this issue Oct 30, 2019

【THE LAST TIME】一文吃透所有JS原型相关知识点 Nealyang/PersonalBlog#57

Open

yangtao2o mentioned this issue Apr 1, 2020

JavaScript深入之创建对象的多种方式以及优缺点 yangtao2o/learn#45

Open

axuebin mentioned this issue Apr 10, 2020

2020年前端面试复习必读精选文章【赠复习导图】 axuebin/articles#39

Open

funnycoderstar mentioned this issue May 5, 2020

JavaScript的几种创建对象的方式 funnycoderstar/blog#135

Open

conan1992 mentioned this issue Jun 22, 2020

JS创建对象的几种方式 conan1992/blog#34

Open

gaojihao mentioned this issue Dec 20, 2022

js基础 gaojihao/react-hierarchy#35

Open

JavaScript深入之创建对象的多种方式以及优缺点 #15

JavaScript深入之创建对象的多种方式以及优缺点 #15

Comments

mqyqingfeng commented May 10, 2017 • edited Loading

写在前面

1. 工厂模式

2. 构造函数模式

2.1 构造函数模式优化

3. 原型模式

3.1 原型模式优化

3.2 原型模式优化

4. 组合模式

4.1 动态原型模式

5.1 寄生构造函数模式

5.2 稳妥构造函数模式

下一篇文章

相关链接

深入系列

xumengzi commented Jun 8, 2017

mqyqingfeng commented Jun 8, 2017

liuxinqiong commented Jun 30, 2017

mqyqingfeng commented Jun 30, 2017

ry928330 commented Aug 28, 2017

mqyqingfeng commented Aug 29, 2017

mqyqingfeng commented Aug 29, 2017 • edited Loading

ry928330 commented Aug 29, 2017

ry928330 commented Aug 29, 2017

mqyqingfeng commented Aug 29, 2017

qujsh commented Nov 13, 2017 • edited by mqyqingfeng Loading

mqyqingfeng commented Nov 15, 2017

yan919 commented Nov 18, 2017

mqyqingfeng commented Nov 20, 2017

MagicHacker commented Feb 5, 2018 • edited by mqyqingfeng Loading

mqyqingfeng commented Feb 8, 2018

geekzhanglei commented Feb 26, 2018

Tan90Qian commented May 1, 2018

jgchenu commented Jun 5, 2018

easyhaloo commented Jun 7, 2018

alex1504 commented Jun 21, 2018 • edited Loading

Xing-He commented Sep 17, 2018

itsuki0927 commented Jul 26, 2019

qiqingfu commented Aug 12, 2019

superwtt commented Nov 10, 2019

luohong123 commented Dec 31, 2019

OldDream commented Apr 2, 2020

zhtzjz commented Jun 25, 2020

xsfxtsxxr commented Jul 2, 2020

puck1006 commented Jul 13, 2020

liyanana commented Nov 13, 2020

cw84973570 commented Dec 10, 2020 • edited Loading

anjina commented Dec 10, 2020

cw84973570 commented Dec 12, 2020 • edited Loading

cw84973570 commented Dec 15, 2020 • edited Loading

haohongyang1 commented Dec 20, 2020

fatFire commented Mar 14, 2021 • edited Loading

ConanLF commented Jun 16, 2021

xiaqingping commented Aug 16, 2021

wangxiaotian commented Mar 7, 2022 • edited Loading

axiaoha commented Apr 21, 2022 • edited Loading

liynxy commented Jul 9, 2022

Jamartin-create commented Oct 12, 2022

DaphnisLi commented Nov 24, 2022

tinyblckc0000al commented Mar 21, 2024

mqyqingfeng commented May 10, 2017 •

edited

Loading

mqyqingfeng commented Aug 29, 2017 •

edited

Loading

qujsh commented Nov 13, 2017 •

edited by mqyqingfeng

Loading

MagicHacker commented Feb 5, 2018 •

edited by mqyqingfeng

Loading

alex1504 commented Jun 21, 2018 •

edited

Loading

cw84973570 commented Dec 10, 2020 •

edited

Loading

cw84973570 commented Dec 12, 2020 •

edited

Loading

cw84973570 commented Dec 15, 2020 •

edited

Loading

fatFire commented Mar 14, 2021 •

edited

Loading

wangxiaotian commented Mar 7, 2022 •

edited

Loading

axiaoha commented Apr 21, 2022 •

edited

Loading