未加星标

理解js中的原型链 js原型链

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏
谈原型链之前先说说关键字new
var obj = new object();
这是一句简单的利用构造器创建一个对象,但是其中经过了三个步骤:
var obj = {};创建一个空对象obj obj. _ proto_ = object.prototype;将obj的_ proto_属性指向object的 prototype成员对象,由此建立了原型链:
obj—>object.prototype—>Object.prototype—>null object.call(obj);初始化obj即给obj赋值
这里解释一下 _ proto_ :
每一个对象都有一个 _ proto_ 属性,它的 _ proto_ 又会有一个 _ proto_ ,它的 _ proto_ 的 _ proto_ 也有 _ proto_ ,以此类推到null。也就是说当寻找object的某个属性或方法时,如果本身没有就在它的 _ proto_ 里找,如果也没有就在它的 _ proto_ 的 _ proto_ 里找,直到找到最后,这就是原型链的思想。然而 _ proto_ 并不能对外公开,譬如这样:
function object () {this.name = 'lulu';this.age = 21;
}
object.prototype = {getInfo : function(){ return 'name:' + this.name + 'age:' + this.age;}
};
var obj = new object();
console.log(obj);
输出结果是:
理解js中的原型链 js原型链
然而输出 console.log(obj._ proto_);却是undefined,也就说明了_ proto_是一个私有属性的事实。
再来一个复杂一点的代码:
var Person = function () { };
Person.prototype.Say = function () {
alert("Person say");
}
Person.prototype.Salary = 50000;
var Programmer = function () { };
Programmer.prototype = new Person();
Programmer.prototype.WriteCode = function () {
alert("programmer writes code");
};
Programmer.prototype.Salary = 500;
var p = new Programmer();
p.Say();
p.WriteCode();
alert(p.Salary);
这里就很好理解了,原型链是这个样子的:

p—>Programmer—>Person—>Object—>null

现在说说new和Object.create()吧
new Object()是一种通过构造函数来创建对象的方式,看看Object.create()的本质吧
if (!Object.create) {
Object.create = function (o) {
function F() {} //定义了一个隐式的构造函数
F.prototype = o;
return new F(); //其实还是通过new来实现的
};
}
一般是这样,new Object()针对于原型对象是函数的情况,Object.create针对于原型对象是对象的情况所以在实际中要区别它们的用法。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 其实
分页:12
转载请注明
本文标题:理解js中的原型链 js原型链
本站链接:http://www.codesec.net/view/533314.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(40)