這篇文章給大家介紹Javascript中對象和繼承的關系是什么，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

成都創(chuàng)新互聯(lián)公司主要從事成都網站制作、網站建設、外貿網站建設、網頁設計、企業(yè)做網站、公司建網站等業(yè)務。立足成都服務恭城,十載網站建設經驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:13518219792

Javascript是一門函數(shù)式編程語言，Javascript當中函數(shù)是核心，在Javascript中函數(shù)也是對象，函數(shù)對象在創(chuàng)建的時候會被添加屬性和方法。

在Javascript中函數(shù)對象有兩種調用方式，一種是new關鍵字的調用，另一種是沒有new關鍵字的調用，前者會返回一個對象，后者會返回return語句中的內容。

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

用new關鍵字來調用如下：

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

不用new關鍵字調用如下：

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

說完了js當中的對象和調用方式，那讓我們來理解下什么是對象。

什么是對象？

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

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

類既然可以理解為一個模板，我們通過一個Person的簡單例子來理解下：

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

 在這個類中name,age,sex為這個類的屬性,而run為這個類的方法；Person的職責是構造對象，進行對象的初始化。

接下來我們看下在js中如何聲明并調用對象。

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

塊級對象

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

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

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

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

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

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

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

對象的增刪改查

增：為對象添加一個屬性

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

刪：通過delete操作符刪除一個對象的屬性

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

改：直接通過賦值來修改一個對象的屬性

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

查：查詢對象的屬性，有兩種方法

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

原型的定義

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

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

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

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

原型鏈

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

對象的繼承（多種方式）

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

我們先定義一個父類

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

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

原型鏈繼承

// 定義一個嬰兒來繼承人的父類
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)點： 簡單、易于實現(xiàn)；父類新增的原型方法和屬性子類都能訪問到；

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

構造繼承

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

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

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

缺點： 實例不是父類的實例；只能繼承父類的實例屬性和方法；無法實現(xiàn)函數(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() // 朕正在睡覺!

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

缺點： 不支持多繼承；實例是父類的實例，不是子類的實例；

拷貝繼承

// 定義一個嬰兒來繼承人的父類
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() // 朕正在睡覺!

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

缺點： 效率較低，內存占用高；無法獲取父類不可枚舉的方法；

注意：不可枚舉的方法是不能使用for in訪問到的方法

組合繼承

// 定義一個嬰兒來繼承人的父類
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)點： 不存在引用屬性共享問題，可以傳參，函數(shù)可復用；

缺點： 調用兩次構造函數(shù)，生成了兩份實例；

寄生組合繼承

// 定義一個嬰兒來繼承人的父類
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)點： 整合了以上幾種繼承的優(yōu)點；

缺點： 實現(xiàn)復雜；

ES6的class

ES6 提供了更接近傳統(tǒng)語言的寫法，引入了 Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。基本上，ES6的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。

可以像如下定義：

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

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

ES6 class的繼承

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

關于Javascript中對象和繼承的關系是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。