JavaScript 原型与原型链

__proto__ 用来获取和设置对象原型,但它是非标准的。__proto__前后的双下划线,说明它本质上是一个内部属性,而不是一个正式的对外的API,只是由于浏览器广泛支持,才被加入了ES6。标准明确规定,只有浏览器必须部署这个属性,其他运行环境不一定需要部署,而且新的代码最好认为这个属性是不存在的。因此,无论从语义的角度,还是从兼容性的角度,都不要使用这个属性,而是使用下面的Object.setPrototypeOf()(写操作)、Object.getPrototypeOf()(读操作)、Object.create()(生成操作)代替。

创建对象的各种方式 对其原型链的影响

var o = {a: 1};
Object.getPrototypeOf(o) === Object.prototype  //true
// o ---> Object.prototype ---> null

var a = ["yo", "whadup", "?"];
// a ---> Array.prototype ---> Object.prototype ---> null function f(){
return 2;
}
// f ---> Function.prototype ---> Object.prototype ---> null

普通对象 o 的原型 指向 Object对象的prototype属性。

数组对象 a 的原型 指向 Array对象的prototype属性。 而 Array对象的 prototype属性也是对象,它的原型 指向 Object.prototype属性。

函数f 的原型 指向 Function对象的prototype属性。

function Graph() {
this.vertices = [];
this.edges = [];
} Graph.prototype = {
addVertex: function(v){
this.vertices.push(v);
}
}; var g = new Graph();
var r = Object.getPrototypeOf(g) === Graph.prototype ; // true
var s =Object.getPrototypeOf(g) === Graph ; // false

使用new 关键字来创建对象。对象g 的原型指向 Graph.prototype。 (注意区别g的原型指向 Graph )

var a = {a: 1};
// a ---> Object.prototype ---> null var b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
var r = Object.getPrototypeOf(b) === a.prototype ;
var s =Object.getPrototypeOf(b) === a ;console.log(b.a); // 1 (inherited)

var c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null var d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty);

使用Object.create来创建对象,b的原型指向了a ,(注意不是a.prototype)

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 sq = new Square(2);

使用class 创建对象sq 的原型指向Square.prototype ,  而 子类Square 的原型 指向父类 Polygon (注意不是Polygon.prototype)

参考链接:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

上一篇:6/8/9/10/11 Sprint2 看板和燃尽图


下一篇:使用trash-cli防止rm -rf 误删除带来的灾难(“事前”非“事后”)