博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
理解实例、原型搜索顺序
阅读量:6431 次
发布时间:2019-06-23

本文共 2824 字,大约阅读时间需要 9 分钟。

构造函数、原型、和实例的关系:

每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

搜索顺序首先从对象实例本身实例开始。如果在实例中找到了具有给定名字的属性,则返回该属性的值。

如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性,如果原型对象中中找到了这个属性,则返回该属性。

但是我们发现一个问题,就是实例中的指针仅指向原型,而不指向构造函数,这里的"仅指向原型对象",为什么搜索顺序又是从对象实例开始,然后搜索原型对象呢?

function Person(){ }

Person.prototype.name="xiu";

Person.prototype.sayName=function(){

            alert(this.name);

   };

var friend = new Person();//创建一个实例对象

friend.name="xie";           //为friend实例对象添加name属性

friend.sayName=function(){//为friend实例对象添加sayName方法

          alert(this.name);

        }

friend.sayName();// xie  会覆盖原型对象的name属性和sayName方法,搜索到的是对象实例中的方法

                         // 这就解释了为什么先从对象开始搜索

--------------------------------------------------------------------------------------------------------------------

function Person(){

            var name=22;

            function sayName(){

                     alert(this.name+10);

               }

          }    //构造函数中有name属性和sayName方法

Person.prototype.name=25;

Person.prototype.sayName=function(){

            alert(this.name);

   };

var friend = new Person();//创建一个实例对象

friend.sayName(); //25   搜索到的是原型对象的sayName方法,而不是指向构造函数中的sayName方法。

                          //实例中的属性值和构造函数初始化的值没有什么关系,除非是用this指向,才能将构造函数初始化的值传递给实例。

--------------------------------------------------------------------------------------------------------------------

function Person(){

            this.name=22;

            this.sayName = function sayName(){

                    alert(this.name+10);

                  }

            }

Person.prototype.name=25;

Person.prototype.sayName=function(){

                   alert(this.name+5);

};

var friend = new Person();//创建一个实例对象

friend.sayName(); // 32 实例属性和方法都在构造函数中定义(都加了this的,创建实例时就把这些属性给了实例对象)

--------------------------------------------------------------------------------------------------------------------

var name=7;

function Person(){

           this.name=22;

            this.sayName = function sayName(){

                    alert(name+10);

                  }

            }

Person.prototype.name=25;

Person.prototype.sayName=function(){

                   alert(this.name+5);

};

var friend = new Person();//创建一个实例对象

friend.sayName(); // 710 实例属性和方法都在构造函数中定义(都加了this的,创建实例时就把这些属性给了实例对象),在没有this的情况下,找到的是全局作用域中的name属性。

                          //同样,为什么变成string类型的,我也不知道为什么?

 经过测试:不管在实例还是在原型对象中,在sayName()方法里,name前如果没有this,全都指向全局作用域中的name属性

                                                                                   如果name前有this,则先找的是实例中的name值,如果没有,那么再找原型对象中的name值,如下面所示。

------------------------------------------------------------------------------------------------------------------------------------------

function Person(){

             this.name=22;

             function sayName(){

                        alert(this.name+10);

                      }

           }

Person.prototype.name=25;

Person.prototype.sayName=function(){

               alert(this.name+5);

};

var friend = new Person();//创建一个实例对象

friend.sayName(); // 27 实例属性定义在构造函数中,方法没有给实例(没有加this),最后在原型中查找sayName方法,name属性就是存在实例中的那个。

-------------------------------------------------------------------------------------------------------------------

function Person(){}

Person.prototype.name="xiu";

Person.prototype.sayName=function(){

            alert(this.name);

   };

var friend = new Person();//创建一个实例对象

friend.sayName();//搜索的是原型对象的方法

转载于:https://www.cnblogs.com/aixiuxiu/p/6506037.html

你可能感兴趣的文章
让你的Git水平更上一层楼的10个小贴士
查看>>
c++ string 之 find_first_not_of 源码
查看>>
mybatis中的#和$的区别
查看>>
ubuntu下搭建NDK环境
查看>>
MessageDigest简单介绍
查看>>
webpack window 使用sass来编译css样式
查看>>
D3 & Data Visualization in Ext JS
查看>>
java通过UUID生成16位唯一订单号
查看>>
001-web基本程序搭建
查看>>
函数指针和指针函数
查看>>
Intel 揭秘:如何在公有云、混合云和私有云间合理放置工作负载
查看>>
借力AI 极验如何构建下一代业务安全?
查看>>
用Python制作迷宫GIF
查看>>
支付宝推出基于区块链跨境支付,巨头入场小企业将面临灭顶之灾
查看>>
从事互联网行业,怎样才能快速掌握一门编程语言呢?
查看>>
深入浅出换肤相关技术以及如何实现
查看>>
Redis 基础、高级特性与性能调优
查看>>
React native 第三方组件 React native swiper
查看>>
接口幂等设计
查看>>
编程入门指南
查看>>