Javascript中prototype与proto的关系详解

更新时间：2018年03月11日 17:09:44 作者：心晴安夏

这篇文章主要给大家介绍了关于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__属性都指向其构造函数的原型

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

您可能感兴趣的文章:

JavaScript使用享元模式实现文件上传优化操作示例
这篇文章主要介绍了JavaScript使用享元模式实现文件上传优化操作,结合实例形式分析了javascript基于享元模式进行文件上传优化操作的原理、步骤及相关使用技巧,需要的朋友可以参考下
2018-08-08
JS回调函数简单用法示例
这篇文章主要介绍了JS回调函数简单用法,结合实例形式分析了js回调函数的定义与简单使用方法,具有一定参考借鉴价值,需要的朋友可以参考下
2017-02-02
浅析JS中NEW的实现原理及重写
本文通过实例代码给大家介绍了JS中NEW的实现原理及重写，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2020-02-02
window.location.href和window.open窗口跳转区别解析
这篇文章主要为大家介绍了window.location.href和window.open 跳转区别解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
javascript高级学习笔记整理
打算做一个js面向对象的贪吃蛇,但是最终是流产了,整理了下废弃的代码,回顾了下PPT.想学习js面向对象的朋友也可以参考下。
2011-08-08
浅谈Webpack自动化构建实践指南
本篇文章主要介绍了Webpack自动化构建实践指南，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
JS 常用校验函数
比较常用到的一些字符验证函数，里面有正则等好东西，推荐大家保存即可直接调用。
2009-03-03
javascript中键盘事件用法实例分析
这篇文章主要介绍了javascript中键盘事件用法,实例分析了键盘事件包含的方法及具体使用技巧,需要的朋友可以参考下
2015-01-01
js查错流程归纳
归纳是为了更好的理解。平时同事有问题找我帮忙解决问题，往往都是很小的问题，这种情况他们并不是缺乏解决问题的知识，而是需要找到问题的办法
2012-05-05
小程序封装路由文件和路由方法(5种全解析)
这篇文章主要介绍了小程序5种路由方法使用场景，封装路由文件和路由方法，提升小程序体验和开发效率，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05