写出几种创建对象的方式，并说说他们的区别是什么？

BLUE 发布于2019-08-23 17:52 / 2786人阅读

摘要：直接通过构造函数创建一个新对象。工厂模式优点是可以解决创建多个相似对象的问题，缺点是无法识别对象的类型。寄生构造函数模式除了使用操作符，其他的和工厂函数一样，可以为对象创建构造函数。

new Object()

直接通过构造函数创建一个新对象。

var obj = new Object()
//等同于 var obj = {}

使用字面量的方式更简单，其实他俩是一样的。
优点是足够简单，缺点是每个对象都是独立的。

工厂模式

function createObj(name,age){
    var obj = {};
    obj.name=name;
    obj.age=age;
    return obj
}
var Anson = createObj("Anson", 18)
console.log(Anson)
//{name: "Anson", age: 18}

优点是可以解决创建多个相似对象的问题，缺点是无法识别对象的类型。

构造函数

function Person(name,age){
    this.name =name;
    this.age=age;
    this.sayName =function (){ alert(this.name) }
}
var person = new Person("小明",13);
console.log(person);
//Person {name: "小明", age: 13, sayName: ƒ}

优点是可以创建特定类型的对象，缺点是多个实例重复创建方法

（构造函数+原型）组合模式

function Person(name, age){
    this.name = name;
    this.age = age;
    Person.prototype.sayName = function (){ alert(this.name) }
 }
var person = new Person("小白",18)
console.log(person);
//Person {name: "小白", age: 18} __proto__ -> sayName: ƒ ()

优点多个实例引用一个原型上的方法比较常用

动态原型

function Person(name,age){
    this.name=name
    this.age =age
    if(typeof this.sayName != "function"){
        Person.prototype.sayName = function(){ alert(this.name) }
  }
}
var person = new Person("小红",15)
console.log(person);
//Person {name: "小红", age: 15} 动态创建sayName: ƒ ()

优点可以判断某个方法是否有效，来决定是否需要初始化原型，if只会在仅在碰到第一个实例调用方法
时会执行，此后所有实例共享此方法，需要注意的一点是，不能重新原型对象。

寄生构造函数模式

function Person(name,age,job){
    var o=new Object();
    o.name=name;
    o.age=age;
    o.job=job;
    o.sayName=function(){
        console.log(this.name)
    }
    return o;
}
var friend=new Person("her",18,"Front-end Engineer");
friend.sayName();
//her

除了使用new操作符，其他的和工厂函数一样，可以为对象创建构造函数。

稳妥模式

function Person(name, age){
    var o={};
    o.sayName=function(){ alert(name) }
    return o;
}
var person = ("小亮"，24);
person.sayName();//’小亮‘

除了使用person.sayName()之外，没有办法在访问到name的值，适合在某些安全执行环景下使用。

Object.create()

const person = {
  isHuman: false,
  printIntroduction: function () {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

const me = Object.create(person);

me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"

传入一个原型对象，创建一个新对象，使用现有的对象来提供新创建的对象的__proto__，实现继承。

参考：《JavaScript高级程序设计第三版》、MDN

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

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

前端面试每日3+1（周汇总2019.08.11）

摘要：前端面试每日题，以面试题来驱动学习，每天进步一点让努力成为一种习惯，让奋斗成为一种享受相信坚持的力量项目地址推荐欢迎跟一起折腾前端，系统整理前端知识，目前正在折腾，打算打通算法与数据结构的任督二脉。《论语》，曾子曰：吾日三省吾身（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！相信坚持的力量！！！项目...

Baoyuan 2019-08-30 15:44 评论0 收藏0
前端面试每日3+1（周汇总2019.08.11）

摘要：前端面试每日题，以面试题来驱动学习，每天进步一点让努力成为一种习惯，让奋斗成为一种享受相信坚持的力量项目地址推荐欢迎跟一起折腾前端，系统整理前端知识，目前正在折腾，打算打通算法与数据结构的任督二脉。《论语》，曾子曰：吾日三省吾身（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！相信坚持的力量！！！项目...

马永翠 2019-08-26 10:42 评论0 收藏0
史上最全阿里 Java 面试题总结

摘要：以下为大家整理了阿里巴巴史上最全的面试题，涉及大量面试知识点和相关试题。的内存结构，和比例。多线程多线程的几种实现方式，什么是线程安全。点击这里有一套答案版的多线程试题。线上系统突然变得异常缓慢，你如何查找问题。以下为大家整理了阿里巴巴史上最全的 Java 面试题，涉及大量 Java 面试知识点和相关试题。 JAVA基础 JAVA中的几种基本数据类型是什么，各自占用多少字节。 S...

winterdawn 2019-08-19 11:02 评论0 收藏0
React 328道最全面试题(持续更新)

摘要：希望大家在这浮夸的前端圈里，保持冷静，坚持每天花分钟来学习与思考。今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点，受到很多朋友的关注，都强烈要求再出多些React相前的面试题，受到大家的邀请，我又找了20多个React的使用者，他们给出了328道React的面试题，由我整理好发给大家，同时发布在了前端面试每日3+1的React专题，希望对大家有所帮助，同时大...

kumfo 2019-08-26 10:13 评论0 收藏0
2019前端面试那些事儿

摘要：虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总新特性，语义化浏览器的标准模式和怪异模式和的区别使用的好处标签废弃的标签，和一些定位写法放置位置和原因什么是渐进式渲染模板语言原理盒模型，新特性，伪虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总1.HTMLHTML5新特性，语义化浏览器的标准模式和怪...

JeOam 2019-08-02 14:28 评论0 收藏0