JS原型和继承
//所有的函数都有一个prototype属性
function aa() {
}
console.info(aa.prototype);
//这个prototype属性引用了一个对象,即原型,初始化时是一个空对象,也就是没有一个成员(即原型属性和原型方法)。
var i = 0;
for (j in aa.prototype) {
console.info(j);
i++;
}
alert("member: " + i);//alert出原型所有属性和方法个数。 0个属性和方法 function AA() { }
AA.prototype.name = 'leyi';
AA.prototype.fn = function () {
return 'hello world!'
};
var bb = new AA();
//实例化对象没有原型对象,他可以通过__proto__来取得原型链上的原型属性和原型方法
console.info(bb.prototype)//undefined
console.info(bb.__proto__) //指向AA.prototype
//那么获取bb的属性和方法就可以通过原型链获取AA原型上的方法属性
console.info(bb.name === bb.__proto__.name);//leyi
console.info(bb.fn() === bb.__proto__.fn());//hello world!
//bb的的构造器函数就是AA.prototype.constructor
console.info(bb.constructor === AA.prototype.constructor)//true
//bb的的构造器函数的原型就是AA.prototype
console.info(bb.constructor.prototype === AA.prototype)//true //继承 //一、通过对象冒充实现继承
function X(width, height) {
this.width = width;
this.height = height;
} function Y(w, h) {
this.fn = X;//让父类的构造函数成为子类的方法
this.fn(w, h);//执行该方法,继承了X方法的width,height属性
delete this.fn; //删掉该方法
this.draw = function () {
console.info(this.width + '---' + this.height);//打印继承来的两个属性
}
}
new Y(100, 200).draw();//100---200 //二、通过call apply实现继承,原理跟上面差不多
function XX(width, height) {
this.width = width;
this.height = height;
} function YY(w, h) {
XX.call(this, w, h);//or XX.apply(this,[w,h]);
this.draw = function () {
console.info(this.width + '---' + this.height);//打印继承来的两个属性
}
}
new YY(300, 400).draw();//300---400 //三、通过原型链实现继承
function XXX(width, height) {
this.fn = function () {
console.info('haha')
}
} function YYY() {
this.draw = function () {
this.fn();
}
}
YYY.prototype = new XXX();
var yyy = new YYY()
console.info(yyy.constructor)//这里有点小问题,yyy构造器函数指向了XXX
//YYY.prototype是YYY的原型,yyy.constructor.prototype是XXX的原型
console.info(yyy.constructor.prototype === YYY.prototype)//false
//修正指向
YYY.prototype.constructor = YYY//将YYY原型的构造器设置指向为YYY构造函数
console.info(yyy.constructor.prototype === YYY.prototype)//true
console.info(yyy.constructor)//YYY
yyy.draw(); //混合式继承
function XXXX(width, height) {
this.width = width;
this.height = height;
}
XXXX.prototype.halo = 'halo!' function YYYY(w, h) {
XXXX.call(this, w, h);//通过call继承XXXX的字段属性,并将其初始化
this.draw = function () {
console.info(this.width + '---' + this.height);
}
}
YYYY.prototype = new XXXX();
YYYY.prototype.constructor = YYYY;
new YYYY(666, 666).draw();//666---666
console.info(new YYYY().halo)//halo! var cst = new YYYY()
console.info(cst.constructor.prototype === YYYY.prototype)//true
console.info(cst.constructor)//YYYY
参考:
http://www.cnblogs.com/ljchow/archive/2010/06/08/1753526.html
http://javapolo.iteye.com/blog/1996871
JS原型和继承的更多相关文章
- js原型链+继承 浅析
名称: prototype--原型对象 __proto__--属性 原型链与继承网上搜索定义,看起来挺绕的 .先说继承: 所有的对象实例都可以共享原型对象包含的属性和方法 例如一个实例A ...
- [js]js原型链继承小结
这是之前总结的, 发现有很多的毛病,就是重点不突出,重新翻看的时候还是得耗费很长时间去理解这玩意. js中的继承 js中什么是类 1,类是函数数据类型 2.每个类有一个自带prototype属性 pr ...
- 彻底弄懂JS原型与继承
本文由浅到深,循序渐进的将原型与继承的抽象概念形象化,且每个知识点都搭配相应的例子,尽可能的将其通俗化,而且本文最大的优点就是:长(为了更详细嘛). 一.原型 首先,我们先说说原型,但说到原型就得从函 ...
- js原型链继承的傻瓜式详解
本文争取用最简单的语言来讲解原型链继承的OOP原理 0.如果对原型继承还没有大致了解,完全一头雾水,请先阅读 <JavaScript高级程序设计>第六章最后部分的寄生组合式继承 或者_廖雪 ...
- js原型与继承
demofunction Fun(){} var foo = new Fun();foo.__proto__ === Fun.prototype 摘要 1.js本身不提供类实现,es6引入了class ...
- 【JS】深入理解JS原型和继承
前言 在学习JS中的原型,原型链,继承这些知识之前,我们先学习下基础知识:函数和对象的关系. 我们一直都知道,函数也是对象的一种,因为通过instanceof就可以判断出来.但是函数和对象的关系并不 ...
- JS原型链继承
继承普通版 继承逻辑上都差不多,普通版调用方式比较繁琐,不利于反复大量的使用: (function (){ //创建一个人员类 function Person(name){ this.name = n ...
- js原型链继承及调用父类方法
方法1: var Parent= function () { }; Parent.prototype.process = function(){ alert('parent method'); }; ...
- 一个小实例理解js 原型和继承
导语1:一个构造函数的原型对象,其实就是这个构造函数的一个属性而已,属性名叫prototype,值是一个对象,对象中有一些属性和方法,所以每个构造函数的实例对象都拥有这些属性和方法的使用权. 导语2: ...
随机推荐
- SQL 导出表结构到Excel
SQL 导出表结构到Excel SELECT 表名 then d.name else '' end, 表说明 then isnull(f.value,'') else '' end, 字段序号 = a ...
- RAID磁盘阵列笔记
磁盘阵列RAID是服务器维护的必备知识,以前不太关心服务器维护方面的知识.目前要负责维护机房里的几台服务器,所以要关注这方面的内容. 磁盘阵列是用多块独立磁盘组成,提供两个方面的作用:数据安全冗余 和 ...
- SQL JOIN的用法
背景:(血的教训) 非常感谢能够有幸的去活力世纪面试,面试官非常的祥和,虽然最后没能够去成,但是非常的感谢,是他让我明白了自己还有很多需要去学习,每一次的面试不是为了去证明自己有多强,能拿多少的工资, ...
- js 控制 css3高级运动 keyframes
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vs2012 发布网站时,发布目录为空
当我使用Release Any CPU时为空 使用Release X86就正常发布了 奇怪. 之后再切换回 Release Any CPU时正常发布. 在生成时可以尝试设置好生成配置,先生成,再发布.
- FlashBuilder 新建项目时提示 java.lang.nullpointerexception
可以尝试安装 Air SDK
- JVM实用参数(四)内存调优
理想的情况下,一个Java程序使用JVM的默认设置也可以运行得很好,所以一般来说,没有必要设置任何JVM参数.然而,由于一些性能问题(很不幸的是,这些问题经常出现),一些相关的JVM参数知识会是我们工 ...
- Codeforces 730I [费用流]
/* 不要低头,不要放弃,不要气馁,不要慌张 题意: 给两行n个数,要求从第一行选取a个数,第二行选取b个数使得这些数加起来和最大. 限制条件是第一行选取了某个数的条件下,第二行不能选取对应位置的数. ...
- Laravel学习笔记(四)数据库 数据库迁移案例
创建迁移 首先,让我们创建一个MySql数据库“Laravel_db”.接下来打开app/config目录下的database.php文件.请确保default键值是mysql: return arr ...
- spring mvc1
DispatcherServlet是前端控制器设计模式的实现,提供Spring Web MVC的集中访问点,而且负责职责的分派,而且与Spring IoC容器无缝集成,从而可以获得Spring的所有好 ...