Javascript是一門(mén)函數(shù)式編程語(yǔ)言，Javascript當(dāng)中函數(shù)是核心，在Javascript中函數(shù)也是對(duì)象，函數(shù)對(duì)象在創(chuàng)建的時(shí)候會(huì)被添加屬性和方法。

在Javascript中函數(shù)對(duì)象有兩種調(diào)用方式，一種是new關(guān)鍵字的調(diào)用，另一種是沒(méi)有new關(guān)鍵字的調(diào)用，前者會(huì)返回一個(gè)對(duì)象，后者會(huì)返回return語(yǔ)句中的內(nèi)容。

function Obj (name) {
 this.name = name;
 return name;
}

用new關(guān)鍵字來(lái)調(diào)用如下：

var obj = new Obj('張三') // 返回 { 'name': '張三' }

不用new關(guān)鍵字調(diào)用如下：

var obj = Obj('張三') // 返回 '張三'

說(shuō)完了js當(dāng)中的對(duì)象和調(diào)用方式，那讓我們來(lái)理解下什么是對(duì)象。

什么是對(duì)象？

對(duì)象是類的一個(gè)實(shí)例（對(duì)象可不是女朋友），有狀態(tài)和行為。例如：一個(gè)電腦就是一個(gè)對(duì)象，它的狀態(tài)有：大小、顏色、品牌等，他的行為有：播視頻、聽(tīng)音樂(lè)、聊天等。

而類是對(duì)象的抽象，可以理解為類是一個(gè)模板，它來(lái)描述一類對(duì)象的狀態(tài)和行為。軟件對(duì)象也有狀態(tài)和行為，軟件對(duì)象的狀態(tài)就是屬性，行為就是方法。在軟件開(kāi)發(fā)中，在方法中可以操作對(duì)象的內(nèi)部狀態(tài)，對(duì)象的相互調(diào)用也是通過(guò)方法來(lái)完成。

類既然可以理解為一個(gè)模板，我們通過(guò)一個(gè)Person的簡(jiǎn)單例子來(lái)理解下：

function Person (name, age, sex) {
 this.name = name;
 this.age = age;
 this.sex = sex;
 run = function () {
 console.log('Run')
 }
}

 在這個(gè)類中name,age,sex為這個(gè)類的屬性,而run為這個(gè)類的方法；Person的職責(zé)是構(gòu)造對(duì)象，進(jìn)行對(duì)象的初始化。

接下來(lái)我們看下在js中如何聲明并調(diào)用對(duì)象。

對(duì)象的創(chuàng)建（多種方法）

塊級(jí)對(duì)象

var person = {
 name: '王小端coder',
 age: 29
}
console.log(person.name); // 王小端coder

構(gòu)造函數(shù) --- 系統(tǒng)自帶

var obj = new Object();
obj.name = '王小端coder'

console.log(obj.name); // 王小端coder

系統(tǒng)自帶的對(duì)象有：Object、Array、Number、Boolean、Date等

構(gòu)造函數(shù) --- 自定義

function Obj (name) {
 this.name = name;
}
var obj = new Obj('王小端coder');
console.log(obj.name); // 王小端coder

對(duì)象的增刪改查

增：為對(duì)象添加一個(gè)屬性

var person = {};
person.name = '王小端coder';
console.log(person.name);

刪：通過(guò)delete操作符刪除一個(gè)對(duì)象的屬性

var person = {
 name: '王小端coder'
};
console.log(person.name); // 王小端coder
delete person.name;
console.log(person.name); // undefined

改：直接通過(guò)賦值來(lái)修改一個(gè)對(duì)象的屬性

var person = {
 name: '王小端coder'
};
console.log(person.name); // 王小端coder
person.name = '王小端JS'
console.log(person.name); // 王小端JS

查：查詢對(duì)象的屬性，有兩種方法

var person = {
 name: '王小端coder'
};
console.log(person['name']); // 第一種方法
console.log(person.name); // 第二種方法

原型的定義

原型是function對(duì)象的一個(gè)屬性，它定義了構(gòu)造函數(shù)制造出的對(duì)象的公共祖先。通過(guò)構(gòu)造函數(shù)產(chǎn)生的對(duì)象，可以繼承該原型的屬性和方法，原型也是對(duì)象。

function Person (name, age) {
 this.name = name;
 this.age = age;
}

Person.prototype = {
 eat: function (food) {
 console.log('eat ' + food);
 },
 sleep: function () {
 console.log('sleeping');
 }
}
var person = new Person ('王小端coder', 29);
console.log(person.name); // 王小端coder
person.eat('apple') // eat apple

我們定義了一個(gè)Person構(gòu)造函數(shù)，而屬于Person構(gòu)造對(duì)象共有的方法，則定義到了Person原型上。

查看構(gòu)造函數(shù)原型的接口：隱士屬性__proto__（其實(shí)我們能夠訪問(wèn)原型的屬性，或者說(shuō)繼承原型，靠的就是__proto__屬性連接著構(gòu)造函數(shù)和原型，可以說(shuō)沒(méi)有__proto__屬性的存在，就無(wú)法實(shí)現(xiàn)原型的繼承）直接通過(guò)new操作符創(chuàng)建的對(duì)象訪問(wèn)__proto__屬性即可查看到原型。

原型鏈

原型鏈就是將一個(gè)個(gè)原型串聯(lián)起來(lái)，形成一條原型繼承的鏈子。Child繼承Parent, Parent繼承GrandParent, 而GrandParent沒(méi)有自定義原型，所以默認(rèn)為原型鏈的最頂端new Object();

對(duì)象的繼承（多種方式）

創(chuàng)建的子類將繼承超類的所有屬性和方法，包括構(gòu)造函數(shù)及方法的實(shí)現(xiàn)。記住，所有屬性和方法都是公用的，因此子類可直接訪問(wèn)這些方法。子類還可添加超類中沒(méi)有的新屬性和方法，也可以覆蓋超類的屬性和方法。和其他功能一樣，JavaScript實(shí)現(xiàn)繼承的方式不止一種。這是因?yàn)镴avaScript中的繼承機(jī)制并不是明確規(guī)定的，而是通過(guò)模仿實(shí)現(xiàn)的。這意味著所有的繼承細(xì)節(jié)并非完全由解釋程序處理。作為開(kāi)發(fā)者，你有權(quán)決定最適用的繼承方式。

我們先定義一個(gè)父類

// 定義一個(gè)父類
function Person (name) {
 this.name = name;
 this.sleep = function () {
 console.log('朕正在睡覺(jué)!');
 }
}
// 在父類原型上面增加一個(gè)方法
Person.prototype.eat = function (food) {
 console.log('朕現(xiàn)在吃的食物是：' + food);
}

下面為您介紹幾種具體的繼承方式：

原型鏈繼承

// 定義一個(gè)嬰兒來(lái)繼承人的父類
function Baby () {
}
Baby.prototype = new Person();
Baby.prototype.name = '小端';

var baby = new Baby()
console.log(baby.name); // 小端
baby.eat('milk'); // 朕現(xiàn)在吃的食物是：milk

優(yōu)點(diǎn)： 簡(jiǎn)單、易于實(shí)現(xiàn)；父類新增的原型方法和屬性子類都能訪問(wèn)到；

缺點(diǎn)： 無(wú)法實(shí)現(xiàn)多繼承；來(lái)自原型的對(duì)象的所有屬性被所有實(shí)例共享；如果為子類增加屬性和方法，無(wú)法放倒構(gòu)造器中；創(chuàng)建子類實(shí)例時(shí)無(wú)法向父類構(gòu)造函數(shù)傳參；

構(gòu)造繼承

// 定義一個(gè)嬰兒來(lái)繼承人的父類
function Baby (name) {
 Person.call(this);
 this.name = name || 'Coder'
}

let baby = new Baby();
console.log(baby.name); // Coder
baby.sleep(); // 朕正在睡覺(jué)!
console.log(baby instanceof Person); // false
console.log(baby instanceof Baby); // true

優(yōu)點(diǎn)： 可以實(shí)現(xiàn)多繼承；創(chuàng)建子類時(shí)可以向父類傳遞參數(shù)；子類可以共享父類引用的屬性；

缺點(diǎn)： 實(shí)例不是父類的實(shí)例；只能繼承父類的實(shí)例屬性和方法；無(wú)法實(shí)現(xiàn)函數(shù)復(fù)用，每個(gè)子類都有父類實(shí)例函數(shù)的副本，影響性能；

實(shí)例繼承

function Baby (name) {
 var instance = new Person();
 instance.name = name || 'Coder';
 return instance;
}
let baby = new Baby();
console.log(baby.name); // Coder
baby.sleep() // 朕正在睡覺(jué)!

優(yōu)點(diǎn)： 不限制調(diào)用方式，返回的對(duì)象具有相同的效果；

缺點(diǎn)： 不支持多繼承；實(shí)例是父類的實(shí)例，不是子類的實(shí)例；

拷貝繼承

// 定義一個(gè)嬰兒來(lái)繼承人的父類
function Baby (name) {
 var person = new Person();
 for (let p in person){
  Baby.prototype[p] = person[p];
 }
 Baby.prototype.name = name || 'Coder';
}
let baby = new Baby();
console.log(baby.name); // Coder
baby.sleep() // 朕正在睡覺(jué)!

優(yōu)點(diǎn)： 支持多繼承；

缺點(diǎn)： 效率較低，內(nèi)存占用高；無(wú)法獲取父類不可枚舉的方法；

注意：不可枚舉的方法是不能使用for in訪問(wèn)到的方法

組合繼承

// 定義一個(gè)嬰兒來(lái)繼承人的父類
function Baby (name) {
 Person.call(this);
 this.name = name || 'Coder';
}
Baby.prototype = new Person();
Baby.prototype.constructor = Baby;

let baby = new Baby();
console.log(baby.name); // Coder
baby.eat('milk'); // 朕現(xiàn)在吃的食物是：milk

優(yōu)點(diǎn)： 不存在引用屬性共享問(wèn)題，可以傳參，函數(shù)可復(fù)用；

缺點(diǎn)： 調(diào)用兩次構(gòu)造函數(shù)，生成了兩份實(shí)例；

寄生組合繼承

// 定義一個(gè)嬰兒來(lái)繼承人的父類
function Baby (name) {
 Person.call(this);
 this.name = name || 'Coder';
}
(function () {
 let Super = function () {};
 Super.prototype = Person.prototype;
 Baby.prototype = new Super();
})();

let baby = new Baby();
console.log(baby.name); // Coder
baby.eat('milk'); // 朕現(xiàn)在吃的食物是：milk

優(yōu)點(diǎn)： 整合了以上幾種繼承的優(yōu)點(diǎn)；

缺點(diǎn)： 實(shí)現(xiàn)復(fù)雜；

ES6的class

ES6 提供了更接近傳統(tǒng)語(yǔ)言的寫(xiě)法，引入了 Class（類）這個(gè)概念，作為對(duì)象的模板。通過(guò)class關(guān)鍵字，可以定義類?；旧?，ES6的class可以看作只是一個(gè)語(yǔ)法糖，它的絕大部分功能，ES5 都可以做到，新的class寫(xiě)法只是讓對(duì)象原型的寫(xiě)法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法而已。

可以像如下定義：

class Person {
 constructor (name) {
  this.name = name;
 }
 sleep () {
  console.log('朕正在睡覺(jué)!');
 }
 eat (food) {
  console.log('朕現(xiàn)在吃的食物是：' + food);
 }
}

let person = new Person('小端');
console.log(person.name); // 小端
person.eat('milk'); // 朕現(xiàn)在吃的食物是：milk

ES6 class的繼承

// 定義一個(gè)嬰兒來(lái)繼承人的父類
class Baby extends Person {
 constructor(name){
  super(name);
 }
}
let baby = new Baby('小端');
console.log(baby.name); // 小端
baby.eat('milk'); // 朕現(xiàn)在吃的食物是：milk

我們可以看到Class可以通過(guò)extends關(guān)鍵字實(shí)現(xiàn)繼承，這比ES5的通過(guò)修改原型鏈實(shí)現(xiàn)繼承，要清晰和方便很多。

我之后會(huì)單獨(dú)用一章來(lái)詳細(xì)講ES6中的Class和繼承。

以上所述是小編給大家介紹的Javascript中的對(duì)象和繼承詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論