JavaScript之new運算符

wwq0327 發布于2019-08-23 18:22 / 2651人閱讀

摘要：之運算符運算符創建一個用戶定義的對象類型的實例或具有構造函數的內置對象的實例。使用指定的參數調用構造函數，并將綁定到新創建的對象。

JavaScript之new運算符

new運算符創建一個用戶定義的對象類型的實例或具有構造函數的內置對象的實例。new關鍵字會進行如下的操作：

1. 創建一個空的簡單JavaScript對象（即{}）；
2. 鏈接該對象（即設置該對象的構造函數）到另一個對象 ；
3. 將步驟1新創建的對象作為this的上下文 ；
4. 如果該函數沒有返回對象，則返回this。

var cat = new Animal("cat");

new Animal("cat") = function () {
    var obj = {};        // 第1步
    obj.__proto__ = Animal.prototype;    // 第2步
    var result = Animal.call(obj,"cat");    // 第3步:obj.Animal("cat")
    return typeof result === "object"? result : obj;    // 第4步
}

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

var car1 = new Car("Eagle", "Talon TSi", 1993);

console.log(car1.make);// expected output: "Eagle"

創建一個用戶自定義的對象需要兩步：

1. 通過編寫函數來定義對象類型。
2. 通過new來創建對象實例。

創建一個對象類型，需要創建一個指定其名稱和屬性的函數；對象的屬性可以指向其他對象，看下面的例子：
當代碼new Foo(…)執行時，會發生以下事情：

1. 一個繼承自Foo.prototype的新對象被創建。
2. 使用指定的參數調用構造函數Foo，并將 this綁定到新創建的對象。newFoo等同于new Foo()，也就是沒有指定參數列表，Foo不帶任何參數調用的情況。
3. 由構造函數返回的對象就是new表達式的結果。如果構造函數沒有顯式返回一個對象，則使用步驟1創建的對象。（一般情況下，構造函數不返回值，但是用戶可以選擇主動返回對象，來覆蓋正常的對象創建步驟）

你始終可以對已定義的對象添加新的屬性。例如，car1.color = "black"語句給car1添加了一個新的屬性color，并給這個屬性賦值 "black"。但是，這不會影響任何其他對象。要將新屬性添加到相同類型的所有對象，你必須將該屬性添加到Car對象類型的定義中。
你可以使用Function.prototype屬性將共享屬性添加到以前定義的對象類型。這定義了一個由該函數創建的所有對象共享的屬性，而不僅僅是對象類型的其中一個實例。下面的代碼將一個值為null的color屬性添加到car類型的所有對象，然后僅在實例對象car1中用字符串 "black" 覆蓋該值。詳見 [prototype](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype) 。

function Car() {}
car1 = new Car();
car2 = new Car();

console.log(car1.color);    // undefined
 
Car.prototype.color = "original color";
console.log(car1.color);    // original color
 
car1.color = "black";
console.log(car1.color);   // black

console.log(car1.__proto__.color) //original color
console.log(car2.__proto__.color) //original color
console.log(car1.color)  // black
console.log(car2.color) // original color

推薦閱讀：
JavaScript之call()理解

我是Cloudy，年輕的前端攻城獅一枚，愛專研，愛技術，愛分享。 
個人筆記，整理不易，感謝閱讀、點贊和收藏。
文章有任何問題歡迎大家指出，也歡迎大家一起交流前端各種問題！

GPU云服務器云服務器 new運算符 javascript運算符 javascript位運算符 javascript運算

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

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

JavaScript陰溝里翻船之運算符優先級

摘要：操作符的兩種形態其實在的操作符描述中，語法是你會發現被中括號所包圍也就意味著可缺省，因此，如果對于不含參數的構造函數而言與二者并無區別，那我們接著思考一個問題，對于前面返回函數的而言，當的時候為什么執行的是而不是呢。　首先歡迎大家關注我的Github博客，也算是對我的一點鼓勵，畢竟寫東西沒法變現，堅持下去也是靠的是自己的熱情和大家的鼓勵。各位讀者的Star是激勵我前進的動力，請不要吝...

selfimpr 2019-08-23 13:41 評論0 收藏0
01.javascript之數據類型

摘要：新增了第七種類型的值數值字符串布爾值對象數據類型判斷有三種方法，可以判斷一個值的類型運算符運算符方法運算符運算符可以返回一個值的數據類型。運算符運算符返回一個布爾值，表示對象是否為某個構造函數的實例。 1.數據類型 JavaScript一共有六種數據類型。（ES6新增了第七種Symbol類型的值）數值(Number) 字符串(String) 布爾值(boolean) undefin...

Aceyclee 2019-08-22 18:40 評論0 收藏0
【JavaScript】核心語法之數據類型

摘要：數據類型原始類型類型實為數字不區分整數和浮點類型整數類型包括負整數，和正整數浮點類型表示小數類型整數和浮點數小數或并不區分整數與浮點數變量的定義并初始化字面量或直接量定義數字值浮點類型是只該數值包含整數部分，小數部分，小數點和小數部分浮點類 JS(JavaScript) 數據類型； 1.原始類型； number類型；實為數字JS不區分整數和浮點類型；整數類型；包括負整數，0和正...

iflove 2019-08-23 11:32 評論0 收藏0
javascript基礎之判斷變量類型

摘要：判斷變量類型數據類型種操作符可能返回的值如下注意的能力有限，其對于類型返回的都是使用場景區分對象和原始類型要區分一種對象類型和另一種對象類型可以使用運算符或對象屬性運算符用法左邊的運算數是一個右邊運算數是對象類的名字或者構造函數返回或如果是判斷變量類型 javaSctipt數據類型7種: Number, String, Boolean, Null, Undefined, Object...

jsdt 2019-08-21 17:49 評論0 收藏0
JavaScript 之核心語法 [ 數據類型 ]

摘要：數據類型數據類型表示數值的類型類型的分類原始類型類型數字類型類型分為整數和浮點數整數正整數負整數變量為數字類型整數顯示浮點數小數變量為數字類型浮點數顯示浮點數在小數點前面如果沒有數字，會被默認為在小數點前的數字為比如會顯示浮點數的數據類型數據類型 - 表示數值的類型類型的分類原始類型 number類型（數字類型） number類型分為整數和浮點數整數 - 正整數、0 、負...

luffyZh 2019-08-23 10:46 評論0 收藏0