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 相关文章推荐
prototype 1.5 & scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 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
SONY SRF-M100的电路分析
2021/03/02 无线电
简单谈谈php浮点数精确运算
2016/03/10 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
js的一些常用方法小结
2011/06/29 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
Python的Urllib库的基本使用教程
2015/04/30 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
python web框架 django wsgi原理解析
2019/08/20 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
网络方面基础面试题
2012/11/16 面试题
学生自我鉴定范文
2013/10/04 职场文书
毕业生自荐信格式
2014/03/07 职场文书
高中军训感言600字
2014/03/11 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
融资租赁计划书
2014/04/29 职场文书
促销活动总结怎么写
2014/06/25 职场文书
法定代表人证明书
2014/11/28 职场文书
委托函范文
2015/01/29 职场文书
白鹤梁导游词
2015/02/06 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers