前言
相信很多初学JS的多伙伴对原型和原型链懵懵懂懂很乱,尤其是__proto__和prototype这两个属性搞不清
创建对象的方式
第一种:字面量方式
var person = { name: '张三' }
var person = new Object({name:'asdf'})
第二种:构造函数方式
var Person = function () {
this.name = '张三'
}
var person = new Person()
第三种:Object.create方式
var p = {name:'张三'}
var person = Object.create(p)
第四中:ES6中的class
class Person {
constructor(){
this.name = '张三'
}
}
var person = new Person()
原型链图
图片分为:实例、构造函数、原型、原型链之间的关系
来个栗子让你看的明明白白的
var Person = function () {
this.name = '张三'
}
var person = new Person()
console.log(person)
实例的原型 和 构造函数的原型 相等
person.__proto__ === Person.prototype //true
也可以这样使用方法来获取
Object.getPrototypeOf(person) === Person.prototype // true
验证一下__proto__和 Object.getPrototypeOf()获取的是否相等
person.__proto__ === Object.getPrototypeOf(person) // true
prototype 是函数身上的(构造函数的原型)
__proto__ 是对象身上的(构造函数的原型)
构造函数的原型属性constructor指向构造函数
Person.prototype.constructor === Person // true
你也可以从实例沿着原型链去找 它自己去__proto__里面去找(这就是原型链)
person.constructor === Person // true
原型链有没有末尾 是有的
Person.prototype.__proto__ === Object.prototype //true
返回空了到顶端了
Person.prototype.__proto__.__proto__ //null
看看第三种方式
咦,怎么和字面量创建的不一样,仔细看看里面有__proto__表示什么?它用原型链形式创建的。验证一下
person.__proto__ === p //true
再回去看那张图是不是清晰了不少
SE6使用class关键字创建对象内部也是构造函数方式不信你自己可以试一试
最后
创建对象的方式的时候写错了单词person写错了parent,发现了我不知道的新大陆看看是什么
console.log(parent) //打印的是window,咦,我了个去
console.log(parent === window) // true
console.log(parent === this) // true
如果以上有错误或者不对的地方请大神指点出来,谢谢