對象是什么

面向對象編程（Object Oriented Programming，縮寫為OOP）是目前主流的編程范式。它將真實世界各種復雜的關系，抽象為一個個對象，然后由對象之間的分工與合作，完成對真實世界的模擬。

每一個對象都是功能中心，具有明確分工，可以完成接收信息、處理數(shù)據、發(fā)出信息等任務。對象可以復用，通過繼承機制還可以定制。因此，面向對象編程具有靈活、代碼可復用、高度模塊化等特點，容易維護和開發(fā)，比起由一系列函數(shù)或指令組成的傳統(tǒng)的過程式編程（procedural programming),更適合多人合作的大型軟件項目。

那么，“對象”（object）到底是什么？我們從兩個層次來理解。

（1）對象是單個實物的抽象

一本書、一輛汽車、一個人都可以是對象，一個數(shù)據庫、一張網頁、一個與遠程服務器的連接也可以是對象。當實物被抽象成對象，實物之間的關系就變成了對象之間的關系，從而就可以模擬現(xiàn)實情況，針對對象進行編程。

（2）對象是一個容器，封裝了屬性（property）和方法（method）

屬性是對象的狀態(tài)，方法是對象的行為（完成某種任務）。比如，我們可以把動物抽象為animal對象，使用“屬性”記錄具體是哪一種動物，使用“方法”表示動物的某種行為（奔跑、捕獵、休息等等）。

構造函數(shù)

面向對象編程的第一步，就是要生成對象。對象是單個實物的抽象。通常需要一個模版，表示某一類實物的共同特征，然后對象根據這個模版生成。

典型的面向對象編程語言（比如 C++ 和 Java），都有“類”（class）這個概念。所謂“類”就是對象的模板，對象就是“類”的實例。但是，JavaScript 語言的對象體系，不是基于“類”的，而是基于構造函數(shù)（constructor）和原型鏈（prototype）。

JavaScript 語言使用構造函數(shù)（constructor）作為對象的模板。所謂”構造函數(shù)”，就是專門用來生成實例對象的函數(shù)。它就是對象的模板，描述實例對象的基本結構。一個構造函數(shù)，可以生成多個實例對象，這些實例對象都有相同的結構。

構造函數(shù)就是一個普通的函數(shù)，但是有自己的特征和用法。

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

上面代碼中，Vehicle就是構造函數(shù)。為了與普通函數(shù)區(qū)別，構造函數(shù)名字的第一個字母通常大寫。

構造函數(shù)的特點有兩個。

• 函數(shù)體內使用了this關鍵字，代表了所要生成的對象實例。
• 生成對象的時候，必須使用new命令。

下面介紹new命令。

new命令

基本用法

new命令的作用，就是執(zhí)行構造函數(shù)，返回一個實例對象。

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

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

上面代碼通過new命令，讓構造函數(shù)Vehicle生成一個實例對象，保存在變量v中。這個新生成的實例對象，從構造函數(shù)Vehicle得到了price屬性。new命令執(zhí)行時，構造函數(shù)內部的this，就代表了新生成的實例對象，this.price表示實例對象有一個price屬性，值是1000。

使用new命令時，根據需要，構造函數(shù)也可以接受參數(shù)。

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

var v = new Vehicle(500);

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

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

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

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

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

var v = Vehicle();
v //undefined
price //1000

上面代碼中，調用Vehicle構造函數(shù)時，忘了加上new命令。結果，變量v變成了undefined，而price屬性變成了全局變量。因此，應該非常小心，避免不使用new命令、直接調用構造函數(shù)。

為了保證構造函數(shù)必須與new命令一起使用，一個解決辦法是，構造函數(shù)內部使用嚴格模式，即第一行加上use strict。這樣的話，一旦忘了使用new命令，直接調用構造函數(shù)就會報錯。

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

Fubar()
//TypeError:Cannot set property '_foo' of undefined

上面代碼的Fubar為構造函數(shù)，use strict命令保證了該函數(shù)在嚴格模式下運行。由于嚴格模式中，函數(shù)內部的this不能指向全局對象，默認等于undefined，導致不加new調用會報錯（JavaScript 不允許對undefined添加屬性）。

另一個解決辦法，構造函數(shù)內部判斷是否使用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

上面代碼中的構造函數(shù)，不管加不加new命令，都會得到同樣的結果。

new命令的原理

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

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

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

如果構造函數(shù)內部有return語句，而且return后面跟著一個對象，new命令會返回return語句指定的對象；否則，就會不管return語句，返回this對象。

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

上面代碼中，構造函數(shù)Vehicle的return語句返回一個數(shù)值。這時，new命令就會忽略這個return語句，返回“構造”后的this對象。

但是，如果return語句返回的是一個跟this無關的新對象，new命令會返回這個新對象，而不是this對象。這一點需要特別引起注意。

var Vehicle = function (){  
    this.price = 1000;  
    return { price: 2000 };
};
(new Vehicle()).price
// 2000

上面代碼中，構造函數(shù)Vehicle的return語句，返回的是一個新對象。new命令會返回這個對象，而不是this對象。

另一方面，如果對普通函數(shù)（內部沒有this關鍵字的函數(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命令簡化的內部流程，可以用下面的代碼表示。

function _new(/* 構造函數(shù) */ constructor, /* 構造函數(shù)參數(shù) */ params)
    //將arguments對象轉為數(shù)組
    var args = [].slice.call(arguments);
    //取出構造函數(shù)
    var constructor = args.shift();
    //創(chuàng)建一個空對象，繼承構造函數(shù)的prototype屬性
    var context = Object.creat(constructor.prototype);
    //執(zhí)行構造函數(shù)
    var result = constructor.apply(context.args);
    //如果返回結果是對象，就直接返回，否則返回context對象
    return(typeof result === 'object' && result != null)?result : context;
}

//實例
var actor = _new(Person,'張三',28);

new.target

函數(shù)內部可以使用new.target屬性。如果當前函數(shù)是new命令調用，new.target指向當前函數(shù)，否則為undefined。

function f(){
    console.log(new.target === f);
}

f() //false
new f() //true

使用這個屬性，可以判斷函數(shù)調用的時候，是否使用new命令。

function f() {
    if (!new.target) {
        throw new Error('請使用 new 命令調用！');
    }
    // ...
}

f() // Uncaught Error: 請使用 new 命令調用！

上面代碼中，構造函數(shù)f調用時，沒有使用new命令，就拋出一個錯誤。

Object.create()創(chuàng)建實例對象

構造函數(shù)作為模板，可以生成實例對象。但是，有時拿不到構造函數(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的模板，后者繼承了前者的屬性和方法

總結

到此這篇關于JavaScript中實例對象和new命令的文章就介紹到這了,更多相關JS實例對象和new命令內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！