- 1、本文档共10页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
优就业WEB教程-JavaScript之原型深入详解
理解原型
原型是一个对象,其他对象可以通过它实现属性继承。任何一个对象都可以成为继承,所有对象在默认的情况下都有一个原型,因为原型本身也是对象,所以每个原型自身又有一个原型。任何一个对象都有一个prototype的属性,记为:__proto__。每当我们定义一个对象,其__proto__属性就指向了其prototype。示例如下:
var foo = {
x: 10,
y: 20
};
即使我们不指定prototype,该属性也会预留。如果我们有明确指向的话,那么链表就连起来了。需要注意的是,prototype自己也有指向,就是最高级的object.prototype。示例如下:
var a = {
x: 10,
calculate: function (z) {
return this.x + this.y + z
}
};
var b = {
y: 20,
__proto__: a
};
var c = {
y: 30,
__proto__: a
};
// call the inherited method
b.calculate(30); // 60
使用原型
理解了原型的原理之后,如何使用原型呢?或者说原型有什么作用呢?
一般的初学者,在刚刚学习了基本的javascript语法后,都是通过面向函数来编程的。如下代码:
var decimalDigits = 2,
tax = 5;
function add(x, y) {
return x + y;
}
function subtract(x, y) {
return x - y;
}
//alert(add(1, 3));
通过执行各个函数来得到最后的结果。但是利用原型,我们可以优化一些我们的代码,使用构造函数:
首先,函数本体中只存放变量:
var Calculator = function (decimalDigits, tax) {
this.decimalDigits = decimalDigits;
this.tax = tax;
};
其具体的方法通过prototype属性来设置:
Calculator.prototype = {
add: function (x, y) {
return x + y;
},
subtract: function (x, y) {
return x - y;
}
};
//alert((new Calculator()).add(1, 3));
这样就可以通过实例化对象后进行相应的函数操作。这也是一般的js框架采用的方法。
原型还有一个作用就是用来实现继承。首先,定义父对象:
var BaseCalculator = function() {
this.decimalDigits = 2;
};
BaseCalculator.prototype = {
add: function(x, y) {
return x + y;
},
subtract: function(x, y) {
return x - y;
}
};
然后定义子对象,将子对象的原型指向父元素的实例化:
var Calculator = function () {
//为每个实例都声明一个税收数字
this.tax = 5;
};
Calculator.prototype = new BaseCalculator();
我们可以看到Calculator的原型是指向到BaseCalculator的一个实例上,目的是让Calculator集成它的add(x,y)和subtract(x,y)这2个function,还有一点要说的是,由于它的原型是BaseCalculator的一个实例,所以不管你创建多少个Calculator对象实例,他们的原型指向的都是同一个实例。
上面的代码,运行以后,我们可以看到因为Calculator的原型是指向BaseCalculator的实例上的,所以可以访问他的decimalDigits属性值,那如果我不想让Calculator访问BaseCalculator的构造函数里声明的属性值,那怎么办呢?只需要将Calculator指向BaseCalculator的原型而不是实例就行了。代码如下:
var Calculator = function () {
this.tax= 5;
};
Calculator.prototype = BaseCalculator.prototype;
在使用第三方库的时候,有时候他们定义的原型方法不能满足我们的需要,我们就可以自己添加一些方法,代码如下:
//覆盖前面Calculator的add() function
Calculator.proto
您可能关注的文档
- 仪器分析300题解析.doc
- 仪器分析实习指导_38733解析.doc
- 仪器检验校正手册解析.doc
- 宜春市2012—2013学年第一学期期末统考高一年级语文试卷解析.doc
- 胰岛素的折叠解析.doc
- 移动通信实验解析.doc
- 移动阳江分公司物业管理竞标文件解析.doc
- 遗传神经元网络算法解析.doc
- 遗传算法原理_转转大师解析.doc
- 遗传学考试题库(汇总)解析.doc
- DB32∕T 2202-2012 北美鹅掌楸容器苗生产技术规程.docx
- DB32_T 2942-2016鲜食夏大豆 通豆9号品种.docx
- DB3210_T 1142-2023 扬州豆腐菜肴制作技艺.docx
- 鸟类追踪器使用规范_DB23T 2871-2021.docx
- DB33/T 2548-2022朱鹮人工种群构建及野化训练技术规程.docx
- DB3308T 153-2024柑橘园碳排放核算办法.docx
- DB3305_T 107-2019 营养健康村建设规范.docx
- DB3305╱T 112-2019 乡镇现代商贸建设和评价规范.docx
- DB3301 T 0393-2023 放心消费直播间管理规范.docx
- DB22T 2349-2015 无公害农产品 寒酥梨生产技术规程.docx
最近下载
- 铁塔室外光电一体箱(技术规范书)-.docx VIP
- 铂科磁材在太阳能逆变器的应用.pdf VIP
- 2025·上海浦东新区·二模智慧藏于“笨办法”:慢工出细活的真谛+审题立意及范文-备战2025年中考语文各地名校模考卷作文导写.docx VIP
- 经血源传播疾病的医院预防控制措施.docx VIP
- 安全操作规程(全套).doc VIP
- (word完整版)苏州工业园区合格证第四版参考题库答案.pdf VIP
- 2025年北京市通州区中考一模从“乐在其中”悟人生真谛”审题立意及范文-备战2025年中考语文各地名校模考卷作文导写.docx VIP
- 2021版 客户侧电能计量装置通用设计要求 第1部分 10kV用电客户电能计量装置.docx VIP
- Q∕SYCQ 4008-2022 工业用液化轻烃原料(打印版).pdf VIP
- 租房合同范本(完美打印版)6篇 .pdf VIP
文档评论(0)