對象字面量和構造函數創建對象的區別？

0x584a 發布于2019-08-26 11:42 / 1340人閱讀

摘要：如下兩段代碼，分別是使用對象字面量和構造函數創建對象。最后，總結下來就是函數對象是繼承自對象的原型，有了函數對象，我們可以給函數的原型添加屬性，這些屬性保存在函數對象中，但是又不會影響其他對象。

看了這篇文章，可以幫助你理解如下內容：

1、向原型鏈上添加屬性為什么用prototype，而一般不用__proto__

2、javascript為什么要設置一個函數對象，他的作用是什么

3、更深層次了解原型鏈

廢話不多說了，正文開始>>>

對象字面量創建的是對象，而構造函數創建的是函數對象。為了幫助理解，我寫了一些代碼。

如下兩段代碼，分別是使用對象字面量和構造函數創建對象。

代碼段1：

var a={"name":"nihao"};
console.log(a);

代碼段2：

var a=function(name){
    this.name=name;
};
var b= new a("nihao");
console.log(b);

首先，我們需要知道：

1、函數對象的原型是對象(原型鏈為：實例，通過new構造函數-->函數對象-->對象-->null)

2、函數有prototype屬性，而對象沒有

然后，在某些場景下，我們有一個公共的屬性，需要多個新建的對象去繼承，這個時候就能體現出函數對象的特點了，我們看下代碼：

1、使用構造器

var a=function(name){
    this.name=name;
};
a.prototype.sex="nan";
var b= new a("nihao");
console.log(b);
console.log(b.name);
console.log(b.sex);

var c=new a("test");
console.log(c);
console.log(c.name);
console.log(c.sex);

如上，可以很容易的實現屬性或方法的繼承，在控制臺打印上述代碼，可以很容易看到原型鏈是這樣的(以對象b為例)：對象b-->函數對象-->對象-->null

2、使用對象字面量

使用對象字面量創建的是對象，他沒有prototype屬性，所以我們只能通過__proto__，但是在對象上使用__proto__可能會導致一些問題的出現。代碼如下：

var a={"name":"nihao"};
a.__proto__.sex="nan";
console.log(a);
console.log(a.name);
console.log(a.sex);
var b={};
console.log(b);
console.log(b.name);
console.log(b.sex);

如上，運行上面代碼，可以很容易得到運行結果：

{name: "nihao"} nihao nan {} undefined nan

哎，這個就很奇怪了，b對象明明設置的為空啊？這是因為在執行a.__proto__.sex="nan";時候，程序向對象的原型上添加了一個屬性sex，而b是對象也是繼承的對象的原型，多以導致了這個問題的出現。

最后，總結下來就是：

函數對象是繼承自對象的原型，有了函數對象，我們可以給函數的原型添加屬性，這些屬性保存在函數對象中，但是又不會影響其他對象。

GPU云服務器云服務器字面量對象對象javascript字面量 js數據對象和對象的區別嗎匹配對象的屬性和函數

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107401.html

通過對象字面量和構造函數創建對象的區別：

摘要：通過對象字面量方式創建對象我們可以直接在創建對象的時候添加功能或者首先定義一個空對象，然后添加屬性和方法上面的空對象為什么打了雙引號這只是一種簡稱而已。通過對象字面量方式創建對象：我們可以直接在創建對象的時候添加功能 var person = { name : zqq, age : 28, say : function(){ return ...

marser 2019-08-20 14:31 評論0 收藏0
《JavaScript模式》讀書筆記(二)字面量和構造函數

摘要：對象字面量定義一個空對象這里的空指的是其自身屬性為空，對象繼承了的屬性和方法添加屬性方法完全刪除屬性方法自定義構造函數用操作符調用構造函數時，函數內部會發發生以下情況創建一個新對象，并且引用了該對象并繼承了該函數的原型屬性和方法被加入到的引對象字面量 //定義一個空對象,這里的空指的是其自身屬性為空，dog對象繼承了Object.prototype的屬性和方法 var dog={} ...

_Zhao 2019-08-26 12:18 評論0 收藏0
關于創建對象的三種寫法 ---- 字面量,new構造器和Object.create()

摘要：前言重新梳理一下發現以前說的有問題順便比較兩兩寫法之間的差異性使用對象字面量表示法函數字面量運行時間嵌套函數字面量調用方法函數字面量運行時間函數字面量運行時間使用操作符后跟構造函數詳情可參考關于中的運算符構造函數與原型鏈一些理解構造函數原型前言 PS:2018/04/14: 重新梳理一下發現以前說的有問題,順便比較兩兩寫法之間的差異性. 1、使用對象字面量表示法 console.ti...

Jiavan 2019-08-26 10:26 評論0 收藏0
《javascript高級程序設計》第六章讀書筆記之 javascript對象的幾種創建方式

摘要：三種使用構造函數創建對象的方法和的作用都是在某個特殊對象的作用域中調用函數。這種方式還支持向構造函數傳遞參數。叫法上把函數叫做構造函數，其他無區別適用情境可以在特殊的情況下用來為對象創建構造函數。一、工廠模式工廠模式：使用字面量和object構造函數會有很多重復代碼，在此基礎上改進showImg(https://segmentfault.com/img/bVbmKxb?w=456&...

xiaotianyi 2019-08-23 14:31 評論0 收藏0
閑話JavaScript數據類型

摘要：支持的類型的內置數據類型羅列如下自定義自定義這三種類型的賦值是同類似的。這根不同，這因為是沒有包裝類新增的基本類型，只支持函數式賦值，不支持字面量和函數構造。 JavaScript支持的類型 JS的內置數據類型羅列如下： undefined null bool number string function object Function Date ...

jerryloveemily 2019-08-20 18:04 評論0 收藏0