寫出幾種創(chuàng)建對象的方式，并說說他們的區(qū)別是什么？

BLUE 發(fā)布于2019-08-23 17:52 / 2858人閱讀

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

new Object()

直接通過構造函數(shù)創(chuàng)建一個新對象。

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

使用字面量的方式更簡單，其實他倆是一樣的。
優(yōu)點是足夠簡單，缺點是每個對象都是獨立的。

工廠模式

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}

優(yōu)點是可以解決創(chuàng)建多個相似對象的問題，缺點是無法識別對象的類型。

構造函數(shù)

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: ?}

優(yōu)點是可以創(chuàng)建特定類型的對象，缺點是多個實例重復創(chuàng)建方法

（構造函數(shù)+原型）組合模式

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: ? ()

優(yōu)點多個實例引用一個原型上的方法比較常用

動態(tài)原型

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} 動態(tài)創(chuàng)建sayName: ? ()

優(yōu)點可以判斷某個方法是否有效，來決定是否需要初始化原型，if只會在僅在碰到第一個實例調(diào)用方法
時會執(zhí)行，此后所有實例共享此方法，需要注意的一點是，不能重新原型對象。

寄生構造函數(shù)模式

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操作符，其他的和工廠函數(shù)一樣，可以為對象創(chuàng)建構造函數(shù)。

穩(wěn)妥模式

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

除了使用person.sayName()之外，沒有辦法在訪問到name的值，適合在某些安全執(zhí)行環(huán)景下使用。

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"

傳入一個原型對象，創(chuàng)建一個新對象，使用現(xiàn)有的對象來提供新創(chuàng)建的對象的__proto__，實現(xiàn)繼承。

參考：《JavaScript高級程序設計第三版》、MDN

GPU云服務器云服務器 java創(chuàng)建對象的幾種方式 js繼承的幾種方式服務器請求的幾種方式對象存儲的桶是什么

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/104283.html

前端面試每日3+1（周匯總2019.08.11）

摘要：前端面試每日題，以面試題來驅(qū)動學習，每天進步一點讓努力成為一種習慣，讓奮斗成為一種享受相信堅持的力量項目地址推薦歡迎跟一起折騰前端，系統(tǒng)整理前端知識，目前正在折騰，打算打通算法與數(shù)據(jù)結構的任督二脈。《論語》，曾子曰：吾日三省吾身（我每天多次反省自己）。前端面試每日3+1題，以面試題來驅(qū)動學習，每天進步一點！讓努力成為一種習慣，讓奮斗成為一種享受！相信堅持的力量！??！項目...

Baoyuan 2019-08-30 15:44 評論0 收藏0
前端面試每日3+1（周匯總2019.08.11）

摘要：前端面試每日題，以面試題來驅(qū)動學習，每天進步一點讓努力成為一種習慣，讓奮斗成為一種享受相信堅持的力量項目地址推薦歡迎跟一起折騰前端，系統(tǒng)整理前端知識，目前正在折騰，打算打通算法與數(shù)據(jù)結構的任督二脈。《論語》，曾子曰：吾日三省吾身（我每天多次反省自己）。前端面試每日3+1題，以面試題來驅(qū)動學習，每天進步一點！讓努力成為一種習慣，讓奮斗成為一種享受！相信堅持的力量?。?！項目...

馬永翠 2019-08-26 10:42 評論0 收藏0
史上最全阿里 Java 面試題總結

摘要：以下為大家整理了阿里巴巴史上最全的面試題，涉及大量面試知識點和相關試題。的內(nèi)存結構，和比例。多線程多線程的幾種實現(xiàn)方式，什么是線程安全。點擊這里有一套答案版的多線程試題。線上系統(tǒng)突然變得異常緩慢，你如何查找問題。以下為大家整理了阿里巴巴史上最全的 Java 面試題，涉及大量 Java 面試知識點和相關試題。 JAVA基礎 JAVA中的幾種基本數(shù)據(jù)類型是什么，各自占用多少字節(jié)。 S...

winterdawn 2019-08-19 11:02 評論0 收藏0
React 328道最全面試題(持續(xù)更新)

摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅持每天花分鐘來學習與思考。今天的React題沒有太多的故事…… 半個月前出了248個Vue的知識點，受到很多朋友的關注，都強烈要求再出多些React相前的面試題，受到大家的邀請，我又找了20多個React的使用者，他們給出了328道React的面試題，由我整理好發(fā)給大家，同時發(fā)布在了前端面試每日3+1的React專題，希望對大家有所幫助，同時大...

kumfo 2019-08-26 10:13 評論0 收藏0
2019前端面試那些事兒

摘要：雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總新特性，語義化瀏覽器的標準模式和怪異模式和的區(qū)別使用的好處標簽廢棄的標簽，和一些定位寫法放置位置和原因什么是漸進式渲染模板語言原理盒模型，新特性，偽雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總1.HTMLHTML5新特性，語義化瀏覽器的標準模式和怪...

JeOam 2019-08-02 14:28 評論0 收藏0