面對(duì)對(duì)象編程

leeon 發(fā)布于2019-08-26 10:09 / 1267人閱讀

摘要：也就是說，構(gòu)造函數(shù)內(nèi)部，指的是一個(gè)新生成的空對(duì)象，所有針對(duì)的操作，都會(huì)發(fā)生在這個(gè)空對(duì)象上。上面代碼中，構(gòu)造函數(shù)的語句，返回的是一個(gè)新對(duì)象。

一、創(chuàng)建對(duì)象
1.構(gòu)造函數(shù)
var Vehicle = function () {
this.price = 1000;
};

var v = new Vehicle();
v.price // 1000

new命令本身就可以執(zhí)行構(gòu)造函數(shù)，所以后面的構(gòu)造函數(shù)可以帶括號(hào)，也可以不帶括號(hào)。下面兩行代碼是等價(jià)的，但是為了表示這里是函數(shù)調(diào)用，推薦使用括號(hào)。

// 推薦的寫法
var v = new Vehicle();
// 不推薦的寫法
var v = new Vehicle

一個(gè)很自然的問題是，如果忘了使用new命令，直接調(diào)用構(gòu)造函數(shù)會(huì)發(fā)生什么事？

這種情況下，構(gòu)造函數(shù)就變成了普通函數(shù)，并不會(huì)生成實(shí)例對(duì)象。而且由于后面會(huì)說到的原因，this這時(shí)代表全局對(duì)象，將造成一些意想不到的結(jié)果。

var Vehicle = function (){
this.price = 1000;
};

var v = Vehicle();
v // undefined
price // 1000
上面代碼中，調(diào)用Vehicle構(gòu)造函數(shù)時(shí)，忘了加上new命令。結(jié)果，變量v變成了undefined，而price屬性變成了全局變量。因此，應(yīng)該非常小心，避免不使用new命令、直接調(diào)用構(gòu)造函數(shù)

為了保證構(gòu)造函數(shù)必須與new命令一起使用，一個(gè)解決辦法是，構(gòu)造函數(shù)內(nèi)部使用嚴(yán)格模式，即第一行加上use strict。這樣的話，一旦忘了使用new命令，直接調(diào)用構(gòu)造函數(shù)就會(huì)報(bào)錯(cuò)。

function Fubar(foo, bar){
"use strict";
this._foo = foo;
this._bar = bar;
}

Fubar()
// TypeError: Cannot set property "_f
上面代碼的Fubar為構(gòu)造函數(shù)，use strict命令保證了該函數(shù)在嚴(yán)格模式下運(yùn)行。由于嚴(yán)格模式中，函數(shù)內(nèi)部的this不能指向全局對(duì)象，默認(rèn)等于undefined，導(dǎo)致不加new調(diào)用會(huì)報(bào)錯(cuò)（JavaScript 不允許對(duì)undefined添加屬性）。

2.object.create()

二、new 命令的原理
使用new命令時(shí)，它后面的函數(shù)依次執(zhí)行下面的步驟。

創(chuàng)建一個(gè)空對(duì)象，作為將要返回的對(duì)象實(shí)例。
將這個(gè)空對(duì)象的原型，指向構(gòu)造函數(shù)的prototype屬性。
將這個(gè)空對(duì)象賦值給函數(shù)內(nèi)部的this關(guān)鍵字。
開始執(zhí)行構(gòu)造函數(shù)內(nèi)部的代碼。

也就是說，構(gòu)造函數(shù)內(nèi)部，this指的是一個(gè)新生成的空對(duì)象，所有針對(duì)this的操作，都會(huì)發(fā)生在這個(gè)空對(duì)象上。構(gòu)造函數(shù)之所以叫“構(gòu)造函數(shù)”，就是說這個(gè)函數(shù)的目的，就是操作一個(gè)空對(duì)象（即this對(duì)象），將其“構(gòu)造”為需要的樣子

三、構(gòu)造函數(shù)里return（new總是返回一個(gè)對(duì)象）
如果構(gòu)造函數(shù)內(nèi)部有return語句，而且return后面跟著一個(gè)對(duì)象，new命令會(huì)返回return語句指定的對(duì)象；否則，就會(huì)不管return語句，返回this對(duì)象。

var Vehicle = function () {
this.price = 1000;
return 1000;
};

(new Vehicle()) === 1000
// false
上面代碼中，構(gòu)造函數(shù)Vehicle的return語句返回一個(gè)數(shù)值。這時(shí)，new命令就會(huì)忽略這個(gè)return語句，返回“構(gòu)造”后的this對(duì)象。

但是，如果return語句返回的是一個(gè)跟this無關(guān)的新對(duì)象，new命令會(huì)返回這個(gè)新對(duì)象，而不是this對(duì)象。這一點(diǎn)需要特別引起注意。

var Vehicle = function (){
this.price = 1000;
return { price: 2000 };
};
上面代碼中，構(gòu)造函數(shù)Vehicle的return語句，返回的是一個(gè)新對(duì)象。new命令會(huì)返回這個(gè)對(duì)象，而不是this對(duì)象

(new Vehicle()).price
// 2000

四、函數(shù)的new
另一方面，如果對(duì)普通函數(shù)（內(nèi)部沒有this關(guān)鍵字的函數(shù)）使用new命令，則會(huì)返回一個(gè)空對(duì)象。

function getMessage() {
return "this is a message";
}

var msg = new getMessage();

msg // {}
typeof msg // "object"
上面代碼中，getMessage是一個(gè)普通函數(shù)，返回一個(gè)字符串。對(duì)它使用new命令，會(huì)得到一個(gè)空對(duì)象。這是因?yàn)閚ew命令總是返回一個(gè)對(duì)象，要么是實(shí)例對(duì)象，要么是return語句指定的對(duì)象。本例中，return語句返回的是字符串，所以new命令就忽略了該語句。

五、new命令簡(jiǎn)化的內(nèi)部流程
function _new(/ 構(gòu)造函數(shù) / constructor, / 構(gòu)造函數(shù)參數(shù) / params) {
// 將 arguments 對(duì)象轉(zhuǎn)為數(shù)組
var args = [].slice.call(arguments);
// 取出構(gòu)造函數(shù)
var constructor = args.shift();
// 創(chuàng)建一個(gè)空對(duì)象，繼承構(gòu)造函數(shù)的 prototype 屬性
var context = Object.create(constructor.prototype);
// 執(zhí)行構(gòu)造函數(shù)
var result = constructor.apply(context, args);
// 如果返回結(jié)果是對(duì)象，就直接返回，否則返回 context 對(duì)象
return (typeof result === "object" && result != null) ? result : context;
}

// 實(shí)例
var actor = _new(Person, "張三", 28);