Javascript中prototype与proto的关系详解

站长资源 2024/11/24 佚名

2 0 1

前言

学到原型的时候感觉头都大了/(ㄒ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__属性都指向其构造函数的原型

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

js中proto和prototype,prototype,proto,js,proto,prototype

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“Javascript中prototype与proto的关系详解”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

Javascript中prototype与proto的关系详解

Node.JS循环删除非空文件夹及子目录下的所有文件

js中document.write和document.writeln的区别

评论“Javascript中prototype与proto的关系详解”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接

Javascript中prototype与__proto__的关系详解

Node.JS循环删除非空文件夹及子目录下的所有文件

js中document.write和document.writeln的区别

评论“Javascript中prototype与__proto__的关系详解”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接

Javascript中prototype与proto的关系详解

评论“Javascript中prototype与proto的关系详解”