Js 原型及原型链

以下三点需要谨记

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>