好好学习-JS基础-原型/原型链

function Foo () {
    this.name = "name"
    this.age = 18
}
Foo.prototype.sayHi = function () {
    console.log('hello')
}
var foo = new Foo()

foo.name  // name
foo.age   // 18
foo.sayHi() // hello

prototype

每个构造函数都有一个prototype属性,这个属性指向原型对象,使用构造函数创建实例对象后,这个prototype指向的原型对象就是实例的原型对象.
prototype 是函数才会有的属性

proto

除了 null 之外,每个对象都拥有一个隐藏的__proto__属性,指向实例的原型对象.可以用 foo.__proto__ 或者 Object.getPrototypeOf(foo) 来访问.

实际上构造函数的prototype属性与实例对象的__proto__属性指向的是同一个原型对象.

foo.__proto__ === Foo.prototype   // true

constructor

每个原型对象都有一个constructor属性指向关联的构造函数

Foo.prototype.constructor === Foo  // true

每个对象都会从原型继承属性

根据所述可绘制:

实例与原型

function Foo () {}
Foo.prototype.name = "Ann"
var foo = new Foo()
foo.name = "ken"
console.log(foo.name)  // Ken
delete foo.name
console.log(foo.name)  // Ann

当读取实例对象的属性时,先在实例对象中查找,如果找不到,就会到实例关联的原型对象中去找,如果原型对象中找不到,就到原型的原型对象中找,一直到最顶层为止.

原型的原型

原型也是一个对象,那么就可以使用最原始的方法创建:

var obj = new Object()
obj.name = "Ann"
console.log(obj.name)  // Ann

原型对象就是通过 Object 构造函数创建出来的,那么原型对象就可以通过__proto__属性访问到:

原型链

Object.prototype 的原型是什么呢? 答案是 null,null 表示没有对象,此处不应该有值

console.log(Object.prototype.__proto__ )  // null

那是什么创建了 Object()这个构造函数呢?

• 一切对象最终继承自 Object 对象
• 一切函数对象(包括 Object 对象)最终继承自 Function对象
• Object对象直接继承自Function对象
• Function对象继承自自己,最终继承自Object对象

看图:

原型链就是图中的蓝色关联

参考文章链接

• https://github.com/mqyqingfen...
• https://juejin.im/post/5a94c0...
• https://juejin.im/post/5b3dd2...
• https://blog.csdn.net/Liu_yun...