javaScript中的原型解析【推荐】
最近在学习javaScript，学习到js面向对象中的原型时，感悟颇多。若有不对的地方，希望可以指正。
js作为一门面向对象的语言，自然也拥有了继承这一概念，但js中没有类的概念，也就没有了类似于java中的extends，所以，我觉得js中的继承主要依赖于js中的原型（链）。
那么，原型是什么呢？我们知道js中函数亦是一种对象，当我们创建一个函数时，其实这个函数也就默认的拥有了一个属性叫做prototype,这个属型叫做原型属性，他是一个指针，指向了这个函数的原型对象，这个原型对象有一个默认的属性叫做constructor,这个属型指向了拥有protptype属型的函数。
function Person(){}
Person.prototype={
// constructor:Person;
first_name:"guo",
hair_color:"black",
city:"zhengzhou",
act:function(){alert("eatting");}
};
以这个为例，我们先创建了一个函数Person,这个函数默认的有一个属性prototype,指向Person.propttype这个对象,这个对象有一个默认的属性constructor（），Person.prototype.constructor--->Person.（其实此处默认的是指向Object,后面会做指正）
当我们通过构造函数创建了实例后会怎么样呢？
function Person(){}
Person.prototype={
first_name:"guo",
hair_color:"black",
city:"zhengzhou",
act:function(){alert("eatting");}
};
var boy=new Person();
var girl=new Person();
在这时，我们要知道，js中的构造函数与函数的区别便是这个new关键字，使用new操作符的函数便是一个构造函数。当我们创建了Person的实例对象把它保存在boy,girl时，这两个实例对象会生成一个默认的属性叫做_proto_（在ECMAScript5中可用[[prototype]]表示），这个属型指向了构造函数的原型对象，也就是boy._proto_--->Person.prototype(与构造函数毫无关系)。此时,boy或者girl可以通过点来调用原型对象中的属型，此时要知道，boy,girl共享了原型对象的属型。我们可以通过isProtptypeOf()或者object.getPrototypeOf()(这个函数的返回值为原型对象，也就是_proto_的值)来验证上述结论。
alert(Person.prototype.isPrototypeOf(boy)); //true alert(Object.getPrototypeOf(boy).first_name); //"guo"
此时，我们可以再做进一步验证，若在实例中创建了一个与原型对象属性重名的属性会怎么样呢？
var boy=new Person(); var girl=new Person(); boy.hair_color="red"; alert(boy.hair_color); //red alert(girl.hair_color); //black alert(Object.getPrototypeOf(boy).hair_color); //black
由此可见，实例中声明的重名属性会屏蔽的原型对象中的属性，但也仅仅时覆盖，不会对原型对象的属型造成影响（Object.getPrototypeOf(boy).hair_color==black），也不会对其他共享原型对象属型的实例对象产生影响(girl.hair_color==black)。与此同时，可以使用delete操作符删除实例对象声明的属性来撤销掉屏蔽效果。我们可以使用hasOwnProperty()来验证一个属型是存在于实例的（true），还是存在于原型对象的(false)。
alert(boy.hasOwnProperty("hair_color")); //true
可以使用Object.keys()来枚举属性。
var key=Object.keys(Person.prototype); alert(key);
学习了这些，我们会发现，使用上面的写法来声明原型对象会出现一个问题，constructor不再指向Person了，这与我们说的原型对象的constructor属性默认指向含有prototype属性的函数背道而驰，这是因为：每创建一个函数会自动创建一个prototype对象，这个对象会默认创建constructor。所以，此处我们的本质是对默认的prototype进行了重写，因此新的consrtuctor也变成了指向Object函数，不再指向Person函数。若constructor真的很重要，那么需要写上constructor:Person.
之后，我们需要知道原型的动态性，改变原型对象中的属性会反应到实例中，不管实例的创建在原型对象的属型改变前面或者后面
function Person(){}
Person.prototype={
first_name:"guo",
hair_color:"black",
city:"zhengzhou",
act:function(){alert("eatting");}
};
var boy=new Person();
Person.prototype.hobby="basketball";
var girl=new Person();
alert(boy.hobby); //basketball
上面这段代码可见，即使对原型对象属性的修改发生在实例创建的后面，boy实例亦然共享了Person.prototype.hobby.
但是，这种情况仅仅发生在原型对象属型的修改，当对原型对象属性进行完全重写时，实例的创建必须放在原型对象属性重写的后面，否则会出错。
function Person(){}
var girl=new Person();
Person.prototype={
first_name:"guo",
hair_color:"black",
city:"zhengzhou",
act:function(){alert("eatting");}
};
var boy=new Person();
Person.prototype.hobby="basketball";
alert(boy.hobby); //basketball
alert(girl.first_name); //undefined
再回到“屏蔽”这一问题上，我们前面了解到了创建实例对象的属性（与原型对象中的某一属性重名）会屏蔽掉原型对象的该属性，但不影响其他实例对象。这里有一个错误，这个情况只适用于基本数据类型，当属性的值引用类型时，会出现一个大问题，看如下代码。
function Person(){}
Person.prototype={
first_name:"guo",
hair_color:"black",
friends:["Nick","John"],
city:"zhengzhou",
act:function(){alert("eatting");}
};
var boy=new Person();
boy.friends.push("Mike");
var girl=new Person();
alert(boy.friends); //Nick,John,Mike
alert(girl.friends); //Nick,John,MIke
可见，上面这句话不适用了，原因是friends是存在于原型对象中的，而不是boy中，所以他的修改会影响到这个环境。（我们可以通过boy.frindes=[]来创建一个boy实例的属性）那么，我们就需要引入组合使用构造函数模式与原型模式。
function Person(hair_color,city){
this.hair_color=hair_color;
this.city=city;
this.friends=["John","Nick"];
}
Person.prototype={
constructor:Person,
first_name:"guo",
act:function() {
alert("eatting");
}
};
var boy=new Person("black","zhengzhou");
var girl=new Person("red","shenyang");
boy.friends.push("Nick");
alert(girl.friends);
alert(boy.friends);
该模式是目前ECMAScript中使用最广泛，认同最高的创建自定义类型的方法，甚至可以作为一种默认模式。
但是对于从事其他面向对象语言的程序员来说，这样的模式显得很怪异，为了将所有的信息都封装到构造函数中，动态原型模式出现了。动态模式主要是通过一个if语句来判断是否需要对原型对象进行初始化，以达到节省资源的目的。
此外还有稳妥构造模式，是为了适应没有共享属性和不使用this的情况。
以上这篇javaScript中的原型解析【推荐】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了es6 js 匹配两个数组对象的方法,实例代码介绍了判断两个数组用的value是否相等，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
本文主要介绍了原生js实现验证码功能的实例，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章介绍了js猜数字小游戏的简单实现代码，很好玩的游戏哦，可以看看你的智商 是否惊人额2013-07-07
这篇文章主要给大家介绍了关于js实现简单的点名器随机色的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章我们将来详细的给大家讲解一下如何在 canvas 上实现坐标的定位,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下2023-08-08
javascript textarea光标定位方法(兼容IE和FF)
主要是实现textarea中光标的定位方法，考虑到多浏览器的兼容性，需要的朋友可以参考下。2011-03-03
这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
ES6 Promise基础用法(resolve、reject、then、catch,a
Promise是JavaScript中处理异步操作的对象,它有三种状态：Pending、Fulfilled、Rejected,使用new Promise创建Promise对象,通过resolve和reject改变状态,then和catch方法用于处理成功和失败的结果,本文介绍ES6 Promise用法,感兴趣的朋友一起看看吧2024-09-09
这篇文章主要为大家详细介绍了如何通过微信小程序开发一个简单的记账本，文中的示例代码讲解详细，感兴趣的小伙伴可以和小编一起学习一下2023-01-01
QLabel是PyQt中用于显示文本和图像的组件,本文详细介绍了其基本用法和高级特性,首先,介绍如何创建QLabel,以及如何用它来显示图像,接着,探讨了如何使用HTML标签格式化文本,设置文本对齐方式,以及如何实现自动换行2024-10-10
最新评论