欢迎来到[自学php网] ①群 AG亚游集团

AG亚游集团 > 网站前端 > javascript >

Javascript中prototype与__proto__的关系详解

来源:未知 ?? 时间:2018-03-15 14:26?作者:小飞侠

[导读] 这篇文章主要给大家介绍了关于Javascript中prototype与__proto__的关系的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随...

前言

学到原型的时候感觉头都大了/(ㄒoㄒ)/~~ 尤其是prototype和__proto__ 傻傻分不清  通过多番查找资料,根据自己的理解,总结如下:

一、构造函数:

构造函数:通过new关键字可以用来创建特定类型的对象的函数。比如像Object和Array,两者属于内置的原生的构造函数,在运行时会自动的出现在执行环境中,可以直接使用。如下:

var arr = new Array();/使用Array构造函数创建了一个array实例arr
arr[0]="a";
arr[1]="b";
alert(arr);/a,b

var obj=new Object();/使用Object构造函数创建了一个Object实例obj
obj.name="c";
obj.age=12;
alert(obj.name);/c

我们可以自定义的创建构造函数,并为其自定义属性和方法,如:

/创建构造函数Person
function Person(name,age){
 this.name=name;
 this.age=age;
 this.sayName=function(){
 alert(this.name)/
 };
}

/使用new关键字,来生成Person实例
var person1=new Person("Tom",22);
var person2=new Person("Jerry",21);
person1.sayName();/Tom
person2.sayName();/Jerry

注意以下几点:

  • 构造函数的名字始终要以大写字母开头(主要是为了区别于非构造函数,也即是区别于普通函数)

  • 构造函数也就是函数,定义构造函数和定义普通函数的语法一样。构造函数和普通函数的区别在于:使用他们的方式不同。任何函数只要使用new操作符来调用,那他就可以作为构造函数;不使用new操作符来调用就是普通函数

function Person(name,age){
 this.name=name;
 this.age=age;
 this.sayName=function(){
 alert(this.name)/
 };
}

/当做构造函数使用
var person=new Person("Tom",22);
person.sayName();/Tom 
/当做普通函数使用
Person("Jerry",30);/添加到window
sayName();/Jerry 等同于window.sayName();

二、原型对象:

每个函数都有一个prototype属性,它是一个指向原型对象的指针,原型对象在定义函数时同时被创建,原型对象的用途是包含所有实例共享的属性和方法

function Person(){
}
/自定义原型对象的属性和方法
Person.prototype.name="Tom";
Person.prototype.age=25;
Person.prototype.sayName=function(){
 alert(this.name);
};
/原型对象中的所有属性和方法 都会自动被所有实例所共享
var person1=new Person();
var person2=new Person();
person1.sayName();/Tom
person2.sayName();/Tom

只要创建了一个新函数,每个函数在创建之后都会获得一个prototype的属性,这个属性指向函数的原型对象(原型对象在定义函数时同时被创建),此原型对象又有一个名为“constructor”的属性,反过来指向函数本身,达到一种循环指向,

如在上边的例子中:alert(Person.prototype.constructor===Person);/会返回true

function Person(){}
alert(Person.prototype.constructor===Person);/true

三、__proto__(注意这里proto左右两边都有两个"_")

当调用构造函数创建一个新实例后,该实例的内部将包含一个指针[[Prototype]],该指针指向创建它的构造函数的原型,在脚本上没有标准的方法来访问[[Prototype]],但大多数浏览器都支持通过__proto__来访问。

function Person(){
}
/自定义原型对象的属性和方法
Person.prototype.name="Tom";
Person.prototype.age=25;
Person.prototype.sayName=function(){
 alert(this.name);
};
/原型对象中的所有属性和方法 都会自动被所有实例所共享
var person1=new Person();
var person2=new Person();
person1.sayName();/Tom
person2.sayName();/Tom
alert(person1.__proto__===Person.prototype);/true

以上述的示例代码为例,各个对象之间的关系如下图所示:

 

总结:

①只要创建了一个函数,该函数的原型对象也随之同时被创建出来,原型对象中的属性和方法被经由其相对应的构造函数所创建的实例所共享

②每个函数在创建之后都会获得一个prototype的属性,这个属性指向该函数的原型对象

③每个对象的__proto__属性都指向其构造函数的原型


    最新文章

    点击排行

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

    京ICP备14009008号@版权所有AG亚游集团

    网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

    去年5家上市系网贷平台净利超亿元 亏损仍为行业常态 一生耕耘国象事业 周永进雄心勃勃创品牌赛事 期权观察:认沽期权隐含波动率抬升 [新浪彩票]足彩18008期投注策略:西汉姆主场连胜 日企承认采购中国产品顶替本国货 未发现质量问题 死海水位年均下降约1.2米 水面缩减或2050年干涸 乡村振兴上升到国家战略后 机遇与短板并存 特朗普为何这么忌惮“中国制造2025”? 斯托:到底谁决定看VAR 肖智举动很愚蠢无法理解 鹿岛大将:次回合不能一味防守 想改变亚冠无冠历史 重返上海?刘炜:顺其自然 合同未到期不方便说 7月26日上市公司晚间公告速递
    安东尼能帮火箭追上勇士吗?前任有话要说 任人唯亲?美媒:特朗普儿子女友或接任白宫发言人 38位委员提案严惩“精日”:有患病委员半夜求联名 陆慧明竞彩:摩纳哥首选平 西汉姆联或输盘 贾跃亭FF 91售价或超200万 将创新能源汽车价格纪… 迪士尼股东反对给CEO 4850万美元年薪和1亿美元股… 连打架都这么潇洒的 怕是也只有麦蒂了吧 大马为何选92岁总理:最能整合各方势力的过渡人选 抓粮食生产不重要了?党报:追求丰收始终不能改 汤尤杯|汤姆斯杯&尤伯杯的历史 你知道多少? 美国前国防部长卡特:台湾是美国印太战略一部分 欧盟对华硕等4家公司罚款1.3亿美元 涉嫌操控价格
    哪国人最青睐韩国吸脂手术? 韩方调查:中国人 自媒体人涉嫌“编造传播虚假信息”被证监会处罚 女子冬天掉长江被小伙救起 苦寻30年找到恩人(图) 世界首列加长版“复兴号”正试验 时速350公里 中超-胡尔克神仙球吕文君建功 上港2-0申花赢德比 天鸽互动发布2017年度财报:年度经调整收益10.05… Intel首席营销官离任:推动弱化Intel Insi… 世界杯赛程表全出 毛豆花生就啤酒的夏天还远吗? 男子与“美女”裸聊被窃隐私 被威胁不给钱就曝光 小投资冷门暴利行业 养20头牛一年赚多少钱 微信赚钱的三大方法 今年开什么店好 AG亚游集团