寫出幾種創建對象的方式，并說說他們的區別是什么？

BLUE 發布于2019-08-23 17:52 / 2806人閱讀

摘要：直接通過構造函數創建一個新對象。工廠模式優點是可以解決創建多個相似對象的問題，缺點是無法識別對象的類型。寄生構造函數模式除了使用操作符，其他的和工廠函數一樣，可以為對象創建構造函數。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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