站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

十分钟带你深入了解javascript的原型和原型链

时间:2021-12-22 [网络编程]作者:fabuyuan 浏览:6 次

原型和原型链是js中的难点也是重点,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效,并且原型和原型链会是面试中必不可少的话题。看完此篇文章一定会让你对原型,原型链有深刻全面的了解,希望对大家有帮助。

十分钟带你深入了解javascript的原型和原型链  2

一,函数对象

所有引用类型(函数,数组,对象)都拥有__proto__属性(隐式原型)

所有函数拥有prototype属性(显式原型)(仅限函数)

原型对象:拥有prototype属性的对象,在定义函数时就被创建

二,构造函数

先复习下构造函数

//创建构造函数
        function Word(words){
            this.words = words;
        }
        Word.prototype = {
            alert(){
                alert(this.words);
            }
        }
        //创建实例
        var w = new Word("hello world");
        w.print = function(){
            console.log(this.words);
            console.log(this);  //Person对象
        }
        w.print();  //hello world
        w.alert();  //hello world

print()方法是w实例本身具有的方法,所以w.print()打印hello world;alert()不属于w实例的方法,属于构造函数的方法,w.alert()也会打印hello world,因为实例继承构造函数的方法。

实例w的隐式原型指向它构造函数的显式原型,指向的意思是恒等于

         w.__proto__ === Word.prototype

当调用某种方法或查找某种属性时,首先会在自身调用和查找,如果自身并没有该属性或方法,则会去它的__proto__属性中调用查找,也就是它构造函数的prototype中调用查找。所以很好理解实例继承构造函数的方法和属性:

w本身没有alert()方法,所以会去Word()的显式原型中调用alert(),即实例继承构造函数的方法。

三,原型和原型链

        Function.prototype.a = "a";
        Object.prototype.b = "b";
        function Person(){}
        console.log(Person);    //function Person()
        let p = new Person();
        console.log(p);         //Person {} 对象
        console.log(p.a);       //undefined
        console.log(p.b);       //b

想一想p.a打印结果为undefined,p.b结果为b

解析:

p是Person()的实例,是一个Person对象,它拥有一个属性值__proto__,并且__proto__是一个对象,包含两个属性值constructor和__proto__

        console.log(p.__proto__.constructor);   //function Person(){}
        console.log(p.__proto__.__proto__);     //对象{},拥有很多属性值

我们会发现p.__proto__.constructor返回的结果为构造函数本身,p.__proto__.__proto__有很多参数

十分钟带你深入了解javascript的原型和原型链  2

我们调用constructor属性,p.___proto__.__proto__.constructor得到拥有多个参数的Object()函数,Person.prototype的隐式原型的constructor指向Object(),即Person.prototype.__proto__.constructor == Object()

从p.__proto__.constructor返回的结果为构造函数本身得到Person.prototype.constructor == Person()所以p.___proto__.__proto__== Object.prototype

所以p.b打印结果为b,p没有b属性,会一直通过__proto__向上查找,最后当查找到Object.prototype时找到,最后打印出b,向上查找过程中,得到的是Object.prototype,而不是Function.prototype,找不到a属性,所以结果为undefined,这就是原型链,通过__proto__向上进行查找,最终到null结束

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

大家理解刚才的过程,相信下面这些应该也都明白

        //Function
        function Function(){}
        console.log(Function);  //Function()
        console.log(Function.prototype.constructor);    //Function()
        console.log(Function.prototype.__proto__);      //Object.prototype
        console.log(Function.prototype.__proto__.__proto__);    //NULL
        console.log(Function.prototype.__proto__.constructor);  //Object()
        console.log(Function.prototype.__proto__ === Object.prototype); //true

总结:

1.查找属性,如果本身没有,则会去__proto__中查找,也就是构造函数的显式原型中查找,如果构造函数中也没有该属性,因为构造函数也是对象,也有__proto__,那么会去它的显式原型中查找,一直到null,如果没有则返回undefined

2.p.__proto__.constructor == function Person(){}

3.p.___proto__.__proto__== Object.prototype

4.p.___proto__.__proto__.__proto__== Object.prototype.__proto__ == null

5.通过__proto__形成原型链而非protrotype

最后附上一张图,大家阅读完之后,看图应该可以很容易理解

十分钟带你深入了解javascript的原型和原型链  2

【相关推荐:javascript学习教程

以上就是十分钟带你深入了解javascript的原型和原型链的详细内容,更多请关注站长家园其它相关文章!

本文标签:  javascript

转载请注明来源:十分钟带你深入了解javascript的原型和原型链

本文永久链接地址:https://www.adminjie.com/post/6739.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • centos7 终端中文乱码怎么办

      centos7 终端中文乱码怎么办

      centos7终端中文乱码的解决办法:1、查看服务器编码;2、查看终端xshell编码;3、设置“exportLANG="zh_CN.UTF-8"”;4、重启...

    • html5标签head和header有什么区别

      html5标签head和header有什么区别

      区别:1、head标签用于定义文档头部,它是所有头部元素的容器,而header标签用于定义文档的页眉(介绍信息);2、浏览器都支持head标签,而旧版本浏览器均...

    • docker可以装在虚拟机上吗

      docker可以装在虚拟机上吗

      docker可以装在虚拟机上;docker容器运行在虚拟机或者物理机上都可以,无论是虚拟机还是物理机,都是硬件和基础设施的一种交付方式,而docker容器主要就...

    • centos是linux系统吗

      centos是linux系统吗

      centos是linux操作系统的一个版本,centos主要分为两个版本:1、CentOSLinux版,该Linux版每两年发行一次;2、CentOSStr...

    • 搜索引擎对html5友好吗

      搜索引擎对html5友好吗

      搜索引擎对html5友好,搜索引擎蜘蛛能够更加轻易的抓取和索引使用Html5标准网站的内容。html5有利于搜索引擎抓取和收录网站更多的内容,对SEO很友好,可...

  • 买服务器送会员
  • 热门文章
  • 买服务器送会员