java入门笔记二：javascript中的原型链

最新推荐文章于 2024-09-08 11:09:43 发布

choumoyin5005

最新推荐文章于 2024-09-08 11:09:43 发布

阅读量139

点赞数

文章标签： java javascript ViewUI

原文链接：https://my.oschina.net/marina1216/blog/742231

版权

本周开始学习JavaScript，相比于之前学习的java，差别不是一点点大。一直很喜欢java语言的严谨性，创建任何东西之前都要先定义其类型，而且定义什么类型就只能做什么类型，从一而终。如此的好处在于，提高语言的可理解性和程序的可调式性。相对之下，js（JavaScript的简称，下文都以此代替，因为我懒,就酱！?）就太任性了，变量类型不用定义就可以直接用，想在何时定义都可以，而且一个变量可以定义不同类型，什么时候换类型都可以，这样随意虽然对于敲代码来说很方便，但是随意创建会增加日后重新阅读时的理解难度，所以建议一切还是尽量保证统一规则，多做注释，给日后阅读代码的他人和自己图个便利。不过所幸数据类型和基本语句、算法跟java都一样，所以掌握java后再入门js不是什么难事。话不多说，直接进入正题。

js里面有一个强大的游戏规则，叫“一切皆对象”。创建的变量是对象，类的实例化是对象，函数（方法）是对象，就连类本身也可以做对象。比如下面的代码：

var Person=function (name) {
    this.name=name;	
}
Person.prototype={
	show:function  () {
	alert("@@@@@");
}
var p1=new Person("alice");
p1.show();

首先定义的Person是函数对象，但是又作为类在其prototype（原型，下文详解）中增加函数，最后作为类创建了实例化对象p1，p1作为Person类的对象，可以调用其prototype中的方法（原型功能，下文详解）。

下面介绍原型,每个类都有两个固定属性：prototype和_proto_，所有的实例化对象都有一个固定的属性：_proto_，可以把prototype理解成类中的共享库,类往里面添加东西它的实例化对象就可以直接访问。

举个例子，代码如下:

var Person=function (name) {
		      this.name=name;
}	
Person.prototype.age=10;
Person.prototype.show=function () {
    alert("我的名字是："+this.name);
}
Person.phone="1388888888";
var p1=new Person("孙悟空");
var p2=new Person("唐僧");
p1.age=44;

我们新建一个Person类，并实例化了两个对象p1和p2，通过Person.prototype往Person的原型中添加属性和函数，那么Person的原型中的所有“资源”就可以供它的实例化对象直接引用，几者之间的关系如下图：

Person的prototype指向Person的原型，原型中的constructor指向Person类，Person类的实例化对象p1，p2中的_proto_指向Person的原型。name是Person类的共同属性，在其构造函数中存在的，name存在于Person及其实例化对象中，prototype里并没有，phone是Person作为对象时添加的，所以类实例化对象中并没有此属性。一般情况下，p1和p2可以直接访问prototype中的成员，如：p1.show()或者p1._proto_.show()，这两者是等价的，但是若p1中定义了和prototype相同的成员，比如上述代码中的age，则结果就不同了，p1.age=44,p1._proto_.age=10。

js里有一个对象挂的超类Object，函数挂的超类Function，那么他们跟一般类及类的原型又是什么关系呢？请见下图：

所以js中的原型就是环环相连，有链接的就可以直接访问其成员，我们称为原型链。原型链有很多好处，比如可以用于继承，也就是直接将父类作为子类的原型，这样所有子类的实例化对象都可以访问父类的成员了：

var Father=function (name,phone) {
	this.name=name;
    this.phone=phone;
}
var Son=function (age) {
	this.age=age;
}
Son.prototype=new Father("孙悟空","138888888");//将父类作为子类的原型链
var s=new Son(500);

Last but not least，以上只是我在JavaScript入门学习中的一点浅层整理，今后深入学习后再来补充，谢谢阅读！

转载于:https://my.oschina.net/marina1216/blog/742231