深入理解JavaScript中實例對象和new命令
對象是什么
面向?qū)ο缶幊蹋∣bject Oriented Programming,縮寫為OOP)是目前主流的編程范式。它將真實世界各種復雜的關(guān)系,抽象為一個個對象,然后由對象之間的分工與合作,完成對真實世界的模擬。
每一個對象都是功能中心,具有明確分工,可以完成接收信息、處理數(shù)據(jù)、發(fā)出信息等任務。對象可以復用,通過繼承機制還可以定制。因此,面向?qū)ο缶幊叹哂徐`活、代碼可復用、高度模塊化等特點,容易維護和開發(fā),比起由一系列函數(shù)或指令組成的傳統(tǒng)的過程式編程(procedural programming),更適合多人合作的大型軟件項目。
那么,“對象”(object)到底是什么?我們從兩個層次來理解。
(1)對象是單個實物的抽象
一本書、一輛汽車、一個人都可以是對象,一個數(shù)據(jù)庫、一張網(wǎng)頁、一個與遠程服務器的連接也可以是對象。當實物被抽象成對象,實物之間的關(guān)系就變成了對象之間的關(guān)系,從而就可以模擬現(xiàn)實情況,針對對象進行編程。
(2)對象是一個容器,封裝了屬性(property)和方法(method)
屬性是對象的狀態(tài),方法是對象的行為(完成某種任務)。比如,我們可以把動物抽象為animal
對象,使用“屬性”記錄具體是哪一種動物,使用“方法”表示動物的某種行為(奔跑、捕獵、休息等等)。
構(gòu)造函數(shù)
面向?qū)ο缶幊痰牡谝徊剑褪且蓪ο?。對象是單個實物的抽象。通常需要一個模版,表示某一類實物的共同特征,然后對象根據(jù)這個模版生成。
典型的面向?qū)ο缶幊陶Z言(比如 C++ 和 Java),都有“類”(class)這個概念。所謂“類”就是對象的模板,對象就是“類”的實例。但是,JavaScript 語言的對象體系,不是基于“類”的,而是基于構(gòu)造函數(shù)(constructor)和原型鏈(prototype)。
JavaScript 語言使用構(gòu)造函數(shù)(constructor)作為對象的模板。所謂”構(gòu)造函數(shù)”,就是專門用來生成實例對象的函數(shù)。它就是對象的模板,描述實例對象的基本結(jié)構(gòu)。一個構(gòu)造函數(shù),可以生成多個實例對象,這些實例對象都有相同的結(jié)構(gòu)。
構(gòu)造函數(shù)就是一個普通的函數(shù),但是有自己的特征和用法。
var Vehicle = function(){ this.price = 1000; };
上面代碼中,Vehicle
就是構(gòu)造函數(shù)。為了與普通函數(shù)區(qū)別,構(gòu)造函數(shù)名字的第一個字母通常大寫。
構(gòu)造函數(shù)的特點有兩個。
- 函數(shù)體內(nèi)使用了
this
關(guān)鍵字,代表了所要生成的對象實例。 - 生成對象的時候,必須使用
new
命令。
下面介紹new
命令。
new命令
基本用法
new
命令的作用,就是執(zhí)行構(gòu)造函數(shù),返回一個實例對象。
var Vehicle = function(){ this.price = 1000; }; var v = new Vehicle(); v.price //1000
上面代碼通過new
命令,讓構(gòu)造函數(shù)Vehicle
生成一個實例對象,保存在變量v
中。這個新生成的實例對象,從構(gòu)造函數(shù)Vehicle
得到了price
屬性。new
命令執(zhí)行時,構(gòu)造函數(shù)內(nèi)部的this
,就代表了新生成的實例對象,this.price
表示實例對象有一個price
屬性,值是1000。
使用new
命令時,根據(jù)需要,構(gòu)造函數(shù)也可以接受參數(shù)。
var Vehicle = function(p){ this.price = p; }; var v = new Vehicle(500);
new
命令本身就可以執(zhí)行構(gòu)造函數(shù),所以后面的構(gòu)造函數(shù)可以帶括號,也可以不帶括號。下面兩行代碼是等價的,但是為了表示這里是函數(shù)調(diào)用,推薦使用括號。
//推薦的寫法 var v = new Vehicle(); //不推薦的寫法 var v = new Vehicle;
一個很自然的問題是,如果忘了使用new
命令,直接調(diào)用構(gòu)造函數(shù)會發(fā)生什么事?
這種情況下,構(gòu)造函數(shù)就變成了普通函數(shù),并不會生成實例對象。而且由于后面會說到的原因,this
這時代表全局對象,將造成一些意想不到的結(jié)果。
var Vehicle = function(){ this.price = 1000; }; var v = Vehicle(); v //undefined price //1000
上面代碼中,調(diào)用Vehicle
構(gòu)造函數(shù)時,忘了加上new
命令。結(jié)果,變量v
變成了undefined
,而price
屬性變成了全局變量。因此,應該非常小心,避免不使用new
命令、直接調(diào)用構(gòu)造函數(shù)。
為了保證構(gòu)造函數(shù)必須與new
命令一起使用,一個解決辦法是,構(gòu)造函數(shù)內(nèi)部使用嚴格模式,即第一行加上use strict
。這樣的話,一旦忘了使用new
命令,直接調(diào)用構(gòu)造函數(shù)就會報錯。
function Fubar(foo,bar){ 'use strict'; this._foo = foo; this._bar = bar; } Fubar() //TypeError:Cannot set property '_foo' of undefined
上面代碼的Fubar
為構(gòu)造函數(shù),use strict
命令保證了該函數(shù)在嚴格模式下運行。由于嚴格模式中,函數(shù)內(nèi)部的this
不能指向全局對象,默認等于undefined
,導致不加new
調(diào)用會報錯(JavaScript 不允許對undefined
添加屬性)。
另一個解決辦法,構(gòu)造函數(shù)內(nèi)部判斷是否使用new
命令,如果發(fā)現(xiàn)沒有使用,則直接返回一個實例對象。
function Fubar(foo, bar) { if (!(this instanceof Fubar)) { return new Fubar(foo, bar); } this._foo = foo; this._bar = bar; } Fubar(1, 2)._foo // 1 (new Fubar(1, 2))._foo // 1
上面代碼中的構(gòu)造函數(shù),不管加不加new
命令,都會得到同樣的結(jié)果。
new命令的原理
使用new
命令時,它后面的函數(shù)依次執(zhí)行下面的步驟。
- 創(chuàng)建一個空對象,作為將要返回的對象實例。
- 將這個空對象的原型,指向構(gòu)造函數(shù)的
prototype
屬性。 - 將這個空對象賦值給函數(shù)內(nèi)部的
this
關(guān)鍵字。 - 開始執(zhí)行構(gòu)造函數(shù)內(nèi)部的代碼。
也就是說,構(gòu)造函數(shù)內(nèi)部,this
指的是一個新生成的空對象,所有針對this
的操作,都會發(fā)生在這個空對象上。構(gòu)造函數(shù)之所以叫“構(gòu)造函數(shù)”,就是說這個函數(shù)的目的,就是操作一個空對象(即this
對象),將其“構(gòu)造”為需要的樣子。
如果構(gòu)造函數(shù)內(nèi)部有return
語句,而且return
后面跟著一個對象,new
命令會返回return
語句指定的對象;否則,就會不管return
語句,返回this
對象。
var Vehicle = function () { this.price = 1000; return 1000; }; (new Vehicle()) === 1000 // false
上面代碼中,構(gòu)造函數(shù)Vehicle
的return
語句返回一個數(shù)值。這時,new
命令就會忽略這個return
語句,返回“構(gòu)造”后的this
對象。
但是,如果return
語句返回的是一個跟this
無關(guān)的新對象,new
命令會返回這個新對象,而不是this
對象。這一點需要特別引起注意。
var Vehicle = function (){ this.price = 1000; return { price: 2000 }; }; (new Vehicle()).price // 2000
上面代碼中,構(gòu)造函數(shù)Vehicle
的return
語句,返回的是一個新對象。new
命令會返回這個對象,而不是this
對象。
另一方面,如果對普通函數(shù)(內(nèi)部沒有this
關(guān)鍵字的函數(shù))使用new
命令,則會返回一個空對象。
function getMessage() { return 'this is a message'; } var msg = new getMessage(); msg // {} typeof msg // "object"
上面代碼中,getMessage
是一個普通函數(shù),返回一個字符串。對它使用new
命令,會得到一個空對象。這是因為new
命令總是返回一個對象,要么是實例對象,要么是return
語句指定的對象。本例中,return
語句返回的是字符串,所以new
命令就忽略了該語句。
new
命令簡化的內(nèi)部流程,可以用下面的代碼表示。
function _new(/* 構(gòu)造函數(shù) */ constructor, /* 構(gòu)造函數(shù)參數(shù) */ params) //將arguments對象轉(zhuǎn)為數(shù)組 var args = [].slice.call(arguments); //取出構(gòu)造函數(shù) var constructor = args.shift(); //創(chuàng)建一個空對象,繼承構(gòu)造函數(shù)的prototype屬性 var context = Object.creat(constructor.prototype); //執(zhí)行構(gòu)造函數(shù) var result = constructor.apply(context.args); //如果返回結(jié)果是對象,就直接返回,否則返回context對象 return(typeof result === 'object' && result != null)?result : context; } //實例 var actor = _new(Person,'張三',28);
new.target
函數(shù)內(nèi)部可以使用new.target
屬性。如果當前函數(shù)是new
命令調(diào)用,new.target
指向當前函數(shù),否則為undefined
。
function f(){ console.log(new.target === f); } f() //false new f() //true
使用這個屬性,可以判斷函數(shù)調(diào)用的時候,是否使用new
命令。
function f() { if (!new.target) { throw new Error('請使用 new 命令調(diào)用!'); } // ... } f() // Uncaught Error: 請使用 new 命令調(diào)用!
上面代碼中,構(gòu)造函數(shù)f
調(diào)用時,沒有使用new
命令,就拋出一個錯誤。
Object.create()創(chuàng)建實例對象
構(gòu)造函數(shù)作為模板,可以生成實例對象。但是,有時拿不到構(gòu)造函數(shù),只能拿到一個現(xiàn)有的對象。我們希望以這個現(xiàn)有的對象作為模板,生成新的實例對象,這時就可以使用Object.create()
方法。
var person1 = { name: '張三', age: 38, greeting: function() { console.log('Hi! I am' + this.name + '.'); } }; var person2 = Object.create(person1); person2.name // 張三 person2.greeting() // Hi! I am 張三.
上面代碼中,對象person1
是person2
的模板,后者繼承了前者的屬性和方法
總結(jié)
到此這篇關(guān)于JavaScript中實例對象和new命令的文章就介紹到這了,更多相關(guān)JS實例對象和new命令內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
字節(jié)跳動面試之如何用JS實現(xiàn)Ajax并發(fā)請求控制
這篇文章主要給大家介紹了關(guān)于字節(jié)跳動面試之如何用JS實現(xiàn)Ajax并發(fā)請求控制的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-05-05JS腳本實現(xiàn)動態(tài)給標簽控件添加事件的方法
這篇文章主要介紹了JS腳本實現(xiàn)動態(tài)給標簽控件添加事件的方法,結(jié)合實例形式分析了javascript添加事件監(jiān)聽的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-06-06