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 相关文章推荐
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 Javascript
vue 授权获取微信openId操作
Nov 13 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简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
浅析php header 跳转
2013/06/17 PHP
PHP图片上传代码
2013/11/04 PHP
PHP数组操作类实例
2015/07/11 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python实现栈的方法
2015/05/26 Python
Python实现KNN邻近算法
2021/01/28 Python
python数据化运营的重要意义
2019/11/25 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
如何理解transaction事务的概念
2015/05/27 面试题
大堂副理的岗位职责范文
2014/02/17 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
JS实现简单的九宫格抽奖
2022/06/28 Javascript