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 相关文章推荐
JavaScript中SQL语句的应用实现
May 04 Javascript
jquery随意添加移除html的实现代码
Jun 21 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
js日期联动示例
2014/05/02 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
Python 数据结构之队列的实现
2017/01/22 Python
Python快速排序算法实例分析
2017/11/29 Python
Python中装饰器学习总结
2018/02/10 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
python线程join方法原理解析
2020/02/11 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
Python多线程多进程实例对比解析
2020/03/12 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
python相对企业语言优势在哪
2020/06/12 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
介绍一下木马病毒的种类
2015/07/26 面试题
新闻发布会主持词
2014/03/28 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
售后前台接待岗位职责
2015/04/03 职场文书