JavaScript 對象是動態(tài)的屬性“包”(指其自己的屬性)。JavaScript 對象有一個指向一個原型對象的鏈鹰晨。當試圖訪問一個對象的屬性時忧侧,它不僅僅在該對象上搜尋年枕,還會搜尋該對象的原型标捺,以及該對象的原型的原型懊纳,依次層層向上搜索网持,直到找到一個名字匹配的屬性或到達原型鏈的末尾。
繼承方法
JavaScript 并沒有其他基于類的語言所定義的“方法”长踊。在 JavaScript 里,任何函數都可以添加到對象上作為對象的屬性萍倡。函數的繼承與其他的屬性繼承沒有差別身弊,包括上面的“屬性覆蓋”(這種情況相當于其他語言的方法重寫)。
當繼承的函數被調用時列敲,this指向的是當前繼承的對象阱佛,而不是繼承的函數所在的原型對象。
var o = {
a: 2,
m: function(){
return this.a + 1;
}
};
console.log(o.m()); // 3
// 當調用 o.m 時,'this'指向了o.
var p = Object.create(o);
// p是一個對象, p.__proto__是o.
p.a = 12; // 創(chuàng)建 p 的自身屬性a.
console.log(p.m()); // 13
// 調用 p.m 時, 'this'指向 p.
// 又因為 p 繼承 o 的 m 函數
// 此時的'this.a' 即 p.a戴而,即 p 的自身屬性 'a'
使用普通語法創(chuàng)建對象
var o = {a: 1};
// o這個對象繼承了Object.prototype上面的所有屬性
// 所以可以這樣使用 o.hasOwnProperty('a').
// hasOwnProperty 是Object.prototype的自身屬性凑术。
// Object.prototype的原型為null。
// 原型鏈如下:
// o ---> Object.prototype ---> null
var a = ["yo", "whadup", "?"];
// 數組都繼承于Array.prototype
// (indexOf, forEach等方法都是從它繼承而來).
// 原型鏈如下:
// a ---> Array.prototype ---> Object.prototype ---> null
function f(){
return 2;
}
// 函數都繼承于Function.prototype
// (call, bind等方法都是從它繼承而來):
// f ---> Function.prototype ---> Object.prototype ---> null
使用構造器創(chuàng)建對象
在 JavaScript 中所意,構造器其實就是一個普通的函數淮逊。當使用 new 操作符來作用這個函數時,它就可以被稱為構造方法(構造函數)扶踊。
function Graph() {
this.vertices = [];
this.edges = [];
}
Graph.prototype = {
addVertex: function(v){
this.vertices.push(v);
}
};
var g = new Graph();
// g是生成的對象,他的自身屬性有'vertices'和'edges'.
// 在g被實例化時,g.__proto__指向了Graph.prototype.
使用 Object.create 創(chuàng)建對象
ECMAScript 5 中引入了一個新方法:Object.create()泄鹏。可以調用這個方法來創(chuàng)建一個新對象秧耗。新對象的原型就是調用 create 方法時傳入的第一個參數:
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, 因為d沒有繼承Object.prototype
使用 class 關鍵字
ECMAScript6 引入了一套新的關鍵字用來實現(xiàn) class备籽。使用基于類語言的開發(fā)人員會對這些結構感到熟悉,但它們是不一樣的分井。 JavaScript 仍然是基于原型的车猬。這些新的關鍵字包括 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);