JavaScript 對(duì)象是動(dòng)態(tài)的屬性“包”(指其自己的屬性)。JavaScript 對(duì)象有一個(gè)指向一個(gè)原型對(duì)象的鏈。當(dāng)試圖訪問一個(gè)對(duì)象的屬性時(shí),它不僅僅在該對(duì)象上搜尋,還會(huì)搜尋該對(duì)象的原型,以及該對(duì)象的原型的原型,依次層層向上搜索,直到找到一個(gè)名字匹配的屬性或到達(dá)原型鏈的末尾。
繼承方法
JavaScript 并沒有其他基于類的語(yǔ)言所定義的“方法”。在 JavaScript 里,任何函數(shù)都可以添加到對(duì)象上作為對(duì)象的屬性。函數(shù)的繼承與其他的屬性繼承沒有差別,包括上面的“屬性覆蓋”(這種情況相當(dāng)于其他語(yǔ)言的方法重寫)。
當(dāng)繼承的函數(shù)被調(diào)用時(shí),this指向的是當(dāng)前繼承的對(duì)象,而不是繼承的函數(shù)所在的原型對(duì)象。
var o = {
a: 2,
m: function(){
return this.a + 1;
}
};
console.log(o.m()); // 3
// 當(dāng)調(diào)用 o.m 時(shí),'this'指向了o.
var p = Object.create(o);
// p是一個(gè)對(duì)象, p.__proto__是o.
p.a = 12; // 創(chuàng)建 p 的自身屬性a.
console.log(p.m()); // 13
// 調(diào)用 p.m 時(shí), 'this'指向 p.
// 又因?yàn)?p 繼承 o 的 m 函數(shù)
// 此時(shí)的'this.a' 即 p.a,即 p 的自身屬性 'a'
使用普通語(yǔ)法創(chuàng)建對(duì)象
var o = {a: 1};
// o這個(gè)對(duì)象繼承了Object.prototype上面的所有屬性
// 所以可以這樣使用 o.hasOwnProperty('a').
// hasOwnProperty 是Object.prototype的自身屬性。
// Object.prototype的原型為null。
// 原型鏈如下:
// o ---> Object.prototype ---> null
var a = ["yo", "whadup", "?"];
// 數(shù)組都繼承于Array.prototype
// (indexOf, forEach等方法都是從它繼承而來).
// 原型鏈如下:
// a ---> Array.prototype ---> Object.prototype ---> null
function f(){
return 2;
}
// 函數(shù)都繼承于Function.prototype
// (call, bind等方法都是從它繼承而來):
// f ---> Function.prototype ---> Object.prototype ---> null
使用構(gòu)造器創(chuàng)建對(duì)象
在 JavaScript 中,構(gòu)造器其實(shí)就是一個(gè)普通的函數(shù)。當(dāng)使用 new 操作符來作用這個(gè)函數(shù)時(shí),它就可以被稱為構(gòu)造方法(構(gòu)造函數(shù))。
function Graph() {
this.vertices = [];
this.edges = [];
}
Graph.prototype = {
addVertex: function(v){
this.vertices.push(v);
}
};
var g = new Graph();
// g是生成的對(duì)象,他的自身屬性有'vertices'和'edges'.
// 在g被實(shí)例化時(shí),g.__proto__指向了Graph.prototype.
使用 Object.create 創(chuàng)建對(duì)象
ECMAScript 5 中引入了一個(gè)新方法:Object.create()。可以調(diào)用這個(gè)方法來創(chuàng)建一個(gè)新對(duì)象。新對(duì)象的原型就是調(diào)用 create 方法時(shí)傳入的第一個(gè)參數(shù):
var a = {a: 1};
// a ---> Object.prototype ---> null
var b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1 (繼承而來)
var c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null
var d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty); // undefined, 因?yàn)閐沒有繼承Object.prototype
使用 class 關(guān)鍵字
ECMAScript6 引入了一套新的關(guān)鍵字用來實(shí)現(xiàn) class。使用基于類語(yǔ)言的開發(fā)人員會(huì)對(duì)這些結(jié)構(gòu)感到熟悉,但它們是不一樣的。 JavaScript 仍然是基于原型的。這些新的關(guān)鍵字包括 class,constructor,static,extends和super。
"use strict";
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(sideLength) {
super(sideLength, sideLength);
}
get area() {
return this.height * this.width;
}
set sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
}
var square = new Square(2);