Js 原型对象 prototype

prototype

1 函数的prototype属性

• 每个函数都有一个prototype属性，它默认指向一个Object空对象（原型对象），原型对象中有一个属性constructor，它指向函数对象

    <script>
        var Fn = function(){}
        console.log(Fn);
        console.log(Fn.prototype)

    </script>

2 给原型对象添加属性（一般是方法）

• 函数的所有实例对象自动拥有原型中的属性（方法）

        function fun(){
        }
        //给原型对象添加属性一般是方法，实例对象可以访问
        fun.prototype.test=function(){
            console.log('test');
        }
        console.log(fun.prototype)
        fun.test()

        function fun(){

        }
        fun.prototype.test=function(){
            console.log('test');
        }
        a = new fun();//
        a.test()
        console.log(a)

• 每个函数function都有一个prototype，即显式原型
• 每个实例对象都有一个__proto__，可称为隐式原型
• 对象的隐式原型的值为其对应的构造函数的显式原型的值

总结：

• 函数的prototype：在定义函数时自动添加的，默认值是一个空Object对象
• 对象的__proto__属性：创建对象时自动添加的，默认值为构造函数的prototype属性值
• 程序员能直接操作显示原型，但不能直接操作隐式原型（ES6之前）

		//内部语句：this.prototype = {}
        function Fn(){
        }
        //1.每个function都有一个prototype，即显式原型属性，默认指向一个空的Object对象
        console.log(Fn.prototype)
        //2.每个实例对象都有一个__proto__,可称为隐藏式
 
        var fn = new Fn()//内部语句：this.__proto__= Fn.prototype
        console.log(fn.__proto__);
        //3.对象的隐式原型的值为其对应构造函数的显示原型的值
        console.log(Fn.prototype=== fn.__proto__)

原型链

1 原型链

• 访问一个对象的属性时，先在自身属性中查找，找到返回
• 如果没有，再沿着__proto__这条链向上查找，找到返回
• 如果最终没找到，返回undefined
• 原型链的终点是object的__proto__（__proto__为null）
• 别名：隐式原型链
• 作用：查找对象的属性（方法）

==注意：==实例对象的隐式原型等于构造函数的显式原型，其实构造函数就是函数对象

		//等价
        function Foo(){}
        var foo = new Function()

总结：
1 Object是由Function创建的
2 Function是由Function自己创建的
3 Function的显示原型也指向一个空的object对象
4 function Foo(){} 和 var foo = new Function()
5 所有函数对象都有隐式原型和显示原型
6 只有Function的显示原型和隐式原型是相等的，自己创建自己
7 所有函数的对象的隐式原型都相等，都是由Function创建的

        function Fn(){

        }
        var fn = new Fn()
        console.log(Fn.prototype instanceof  Object)// true
        console.log(Object.prototype instanceof Object)//false
        console.log(Function.prototype instanceof Object) //true

总结 ：
函数的显示原型指向的对象默认是空Object实例对象（但Object不满足）

 //Function由自己创建
 console.log(Function.prototype == Function.__proto__) //true

总结：
所有函数（类型 function，如上图所示）都是Function的实例

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

总结：
Object是原型对象链的尽头

属性

1 读取对象的属性值时：会自动到原型链中找
2 设置对象的属性值时：不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值
3 方法一般定义在原型中，属性一般通过构造函数定义在对象本身上

        function Fn() { }
        var fn1 = new Fn()
        Fn.prototype.a ='xxx';

        var fn2 = new Fn()
        
        fn2.a= 'yyy'
        console.log(fn1.a)//xxx
        console.log(fn2.a)//yyy

instanceof

1 instanceof是如何判断

• 表达式：A instanceof B
• 如果B函数的显示原型链对象在A对象的原型链上(proto)，返回true，否则返回false

        function Foo(){}
        var f1 = new Foo()
        console.log(f1 instanceof Foo)//true
        console.log(f1 instanceof Object)//true

        console.log(Object instanceof Function)//true
        console.log(Object instanceof Object)//true
        console.log(Function instanceof Function)//true
        console.log(Function instanceof Object)//true