原型链图解帮助理解

Drizzlejj

已于 2022-09-14 21:54:09 修改

阅读量126

点赞数

文章标签：原型模式 javascript

于 2022-09-14 21:07:04 首次发布

本文链接：https://blog.csdn.net/Drizzlejj/article/details/126859107

版权

本文深入探讨了JavaScript中的原型和原型链概念，包括函数的prototype属性、对象的_proto_属性、构造函数与原型的关系、原型链的尽头以及实例对象的隐式原型。通过示例代码展示了如何添加和访问原型上的属性和方法，并解释了实例对象如何共享原型上的属性。同时，文章还讨论了原型链中的冲突和覆盖问题，以及函数和Object.prototype的实例关系。

摘要由CSDN通过智能技术生成

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

* 函数的prototype属性：在定义函数时自动添加的，默认值是一个空object对象

* 对象的_ proto__属性：创建对象时自动添加的，默认值为构造函数的prototype属性值

* 程序员能直接操作显式原型，但不能直接操作隐式原型（ES6之前）

<script>
        //  每个函数都有一个 prototype 属性，它默认指向一个 Object 空对象（即：原型对象）
        function fun(){ }
        console.log(fun.prototype);
        // 向原型对象中添加属性或者方法 ===> 实例对象可以访问
        fun.prototype.test = function(){
            console.log('我是原型上添加的方法test(),实例可以调用');
        }
        console.log(fun.prototype);
        // 原型对象中有一个属性constructor，它指向函数对象
        console.log(fun.prototype.constructor===fun);

        // 创建一个实例,并调用上面给原型添加的方法 test
        var fun1 = new fun()
        fun1.test()
</script>

1、函数的显示原型指向默认是空 Object 实例对象(但 Object 不满足)

function Fn() {
     this.test1 = function(){
          console.log('test1()');
     }
}
Fn.prototype.test2 = function(){
    console.log('test2()');
}
var fn = new Fn()
console.log(Fn.prototype instanceof Object);  // true
console.log(Object.prototype instanceof Object); // false

2、所有函数都是 Function 的实例（包括 Function 本身）

 console.log(Fn instanceof Function); // true
console.log(Function.__proto__ ===Function.prototype);

3、Object 的原型对象是原型链的尽头

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

4、属性一般放在对象，方法一般放在原型上，实例对象的隐式原型等于构造函数的显示原型（Person.prototype）

       <script>
        function Person(name,age){
            this.name = name
            this.age = age
        }
        Person.prototype.setName = function(name){
            this.name = name
        }
        var p1 = new Person('Tom','12')
        console.log(p1);
        p1.setName('Bob')
        console.log(p1);
        var p2 = new Person('rose','14')
        p2.setName('romatic')
        // 实例对象的隐式原型等于构造函数的显示原型（Person.prototype）
        console.log(p1.__proto__ === p2.__proto__);  // true
       </script>

测试题：

    <script>
        function Fn(){}
        Fn.prototype.a = 1
        var fn1 = new Fn()
        Fn.prototype = {
            a:2,b:3
        }
        var fn2 = new Fn()
        console.log(fn1.a,fn1.b,fn2.a,fn2.b); // 1 undefined 2 3
    </script>
    <script>
        function F(){}
        Object.prototype.a = function(){
            console.log('a()');
        }
        Function.prototype.b = function(){
            console.log('b()');
        }
        var f = new F()
        f.a()  // a()
        F.a()  // a()
        F.b()  // b()
        f.b()   // f.b is not a function
    </script>