prototype的使用和原理

原创已于 2022-02-28 12:00:29 修改 · 261 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#原型模式 #javascript #前端

于 2022-02-28 11:42:55 首次发布

本文探讨了JavaScript中对象的相等性判断，通过示例展示了即使两个对象属性相同，它们也不相等。同时，解释了构造函数和原型的关系，以及如何通过原型链进行属性访问。文中还提醒在工作中避免直接在原型上定义属性。最后，通过代码展示了原型对象的层次结构，并介绍了原型链的工作原理。

下面那几个==是返回fales还是true

 var  arr =[];
                // 原型  prototype  
                for (let index = 0; index < 2; index++) {
                        arr.push({})
                    }
                console.log(arr[ 0 ] ==  arr [ 1 ])  //false,因为两给都是新对象

                function createPerson(){
                    this.name = "zs"
                    this.age=14
                    this.sayHi=function(){
                    console.log(1111)
                    }
                 }
               var p1 = new createPerson();
               var p2 = new createPerson();
               console.log(p1 ==  p2)  //false
               console.log( p1.sayHi == p2.sayHi)  //false

构造函数 => 构造函数的原型对象 => 原型对象的原型对象

相当于：构造函数==> 原型对象 ==>Object

1.js会给构造函数对象动态添加一个属性

function Person(){
                    this.name="zs1111"
                }
                Person.prototype.sayHi=function(){
                    console.log(1111)
                }
                //原型链 搜索
                var p3=new Person();

                p3.sayHi()


                console.log(Person.prototype)
                console.log(p3.toString())
                console.log(new Object())

先找到谁就输出谁：

            //原型上的属性
                Person.prototype.name="zs";//工作中不要这样写
                console.log(p3.name)//zs1111

用一段简短的代码和图片让你们了解prototype的原理

                var f={}

                var c={}

                var o={}

                f.prototype=c

                c.prototype=o