以下三点需要谨记
1.每个对象都具有一个名为__proto__的属性,字面量对象除外;
2.每个构造函数(构造函数标准为大写开头,如Function(),Object()等等JS中自带的构造函数,以及自己创建的)都具有一个名为prototype的方法(注意:既然是方法,那么就是一个对象(JS中函数同样是对象),所以prototype同样带有__proto__属性);__proto__可以自身调用,调用语法对象,prototype可以为实例提供方法
3.每个对象的__proto__属性指向自身构造函数的prototype;
示例一
let obj = {
}
console.log(obj)
//obj.__proto__ 可以直接打印出对象的原型 也可以使用console.dir(obj.__proto__)打印
console.log(obj.__proto__)
__proto__就是obj的原型对象 数组也一样
示例二
// 字面量对象没有原型
let hd = Object.create(null,{
name:{
value:'原型'
}
})
console.log(hd)
没有 _ proto _
示例三
let obj = {
// 给自己增加一个方法
render () {
console.log('我是obj对象自己的方法')
}
}
// 给父亲增加一个方法
obj.__proto__.render = function() {
console.log('我是obj对象的父原型方法')
}
console.log(obj)
// 执行结果看下图 有两个render方法 打印了我是obj对象自己的方法 证明都有方法 会优先选择自己的方法
obj.render()
执行结果
示例四
<script>
// 构造函数
// 定义构造函数 函数名称开头大写
// 构造函数本身是普通函数,当我们用new关键字调用时,能实现某类功能,我们才把它称呼为构造函数。
// 所以构造函数的核心就是关键字new
// 作用:构造新对象,设置对象的属性和方法.(构造函数里面写一堆this的作用)
// 每一个构造函数都有__proto__ prototype 两个方法
function User() {
}
// 使用__proto__添加的方法 不会被构造函数继承
User.__proto__.view = function() {
console.log('我往构造函数中的__proto__添加了一个view方法')
}
// 调用即打印
User.view()
// 使用prototype添加的方法 可以被构造函数继承
User.prototype.show = function () {
console.log('我被obj调用了')
}
console.dir(User)
var obj = new User()
console.log(obj)
// show()方法来源于User的prototype,继承了User的prototype,也证明了每个对象的__proto__属性指向自身构造函数的prototype
obj.show()
// 可以发现打印结果为true
console.log(obj.__proto__ == User.prototype)
</script>
执行结果
示例五
<script>
let obj = new Object();
obj.name = '添加一个对象'
console.dir(Object)
// Object 中的 __proto__ 就只服务与自己
Object.prototype.show = function() {
console.log('添加方法show')
}
obj.show()
function User() {
}
console.dir(User)
// User构造函数的prototype.__proto__指向了Object的prototype,User.__proto__.__proto__也指向了Object.prototype 说明User的父级都指向了同一个对象Object 因为User中的父级继承了show方法
console.log(User.prototype.__proto__ === User.__proto__.__proto__)
</script>
打印结果
完整实例及原型图
<script>
function User() {
}
console.dir(User)
// User.__proto__
User.__proto__.view = function() {
console.log('User.__proto__')
}
User.view()
// User.prototype
User.prototype.show = function() {
console.log('User.prototype')
}
// hd 的 User.prototype 证明hd执行了 User
let hd = new User()
hd.show()
console.log(User.prototype == hd.__proto__)
// new Object()
let obj = new Object();
obj.name = 'obj'
console.dir(Object)
Object.prototype.show2 = function() {
console.log('Object.prototype')
}
console.log(User.prototype.__proto__ === User.__proto__.__proto__)
// null
console.log(Object.prototype.__proto__)
</script>