Javascript中prototype与__proto__的关系详解


Posted in Javascript onMarch 11, 2018

前言

学到原型的时候感觉头都大了/(ㄒ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

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

 Javascript中prototype与__proto__的关系详解

总结:

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

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

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

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JS代码同步文本框内容的实例方法
Jul 12 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
vue+elementUI实现简单日历功能
Sep 24 Javascript
js中document.write和document.writeln的区别
Mar 11 #Javascript
Javascript 编码约定(编码规范)
Mar 11 #Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 #Javascript
js经验分享 JavaScript反调试技巧
Mar 10 #Javascript
webpack打包node.js后端项目的方法
Mar 10 #Javascript
webpack external模块的具体使用
Mar 10 #Javascript
webpack组织模块打包Library的原理及实现
Mar 10 #Javascript
You might like
在PHP的图形函数中显示汉字
2006/10/09 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
JavaScript入门基础
2015/08/12 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
pygame播放音乐的方法
2015/05/19 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
Python基于template实现字符串替换
2020/11/27 Python
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
应届大学生简历中的自我评价
2014/01/15 职场文书
股份转让协议书
2014/04/12 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
教师年度考核个人总结
2015/02/12 职场文书
《春酒》教学反思
2016/02/22 职场文书