JS 原型 & 继承
理解原型链
先看看http://www.ituring.com.cn/article/56184和http://www.cavabiao.com/prototype-and-inherit-of-javascript/
首先需要知道new的时候都发生了什么
总的来说就是new得到的对象的_proto_指向F的prototype
比如 new F(); 下面是turing社区的讲解
new 运算符接受一个类(函数)F 及其参数new F(arguments...)
这一过程分为三步:
创建类的实例。这步是把一个空的对象的 _proto_ 属性设置为 F.prototype 。
初始化实例。函数 F 被传入参数并调用,关键字 this 被设定为该实例。
返回实例。
function New(f) {
var n = {
'__proto__': f.prototype
}; /*第一步*/
return function() {
f.apply(n, arguments); /*第二步*/
return n; /*第三步*/
};
}
原型式继承
下面是最简单的使用原型的例子
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype = {
print: function() {
console.log(this.x, this.y);
}
}; var p = new Point(10, 20);
p.print(); // 10 20
原型继承 简单来说就是修改该类(function)的prototype属性值 指向另一个对象
不过我们可以定义一个通用的方式来完成继承 这是 Douglas Crockford 提出的一种方案
定义如下函数
function object(o) {
function F() {};
F.prototype = o;
return new F();
}
实际上这个函数就是ECMA5中定义的Object.create函
一个使用原型方式继承的例子
function object(o) {
function F() {};
F.prototype = o;
return new F();
} var person = {
name: 'nico',
friends: ['aaa', 'bbb', 'ccc']
} var anotherPerson = object(person);
var yetAntherPerson = object(person);
anotherPerson.name = 'greg'; console.log(anotherPerson.name); //gerg//因为上一句为antherPerson增加一个name属性并赋值//原型name还是nico
console.log(yetAntherPerson.name); //nico anotherPerson.friends.push('ddd'); //因为我这里是对friends做修改 所以不会为anotherPerson创建新的属性
// 查找anotherPerson下的friends属性 在其原型中找到了 所以这里的修改是原型中friends console.log(anotherPerson.friends); //["aaa", "bbb", "ccc", "ddd"]
console.log(yetAntherPerson.friends); //["aaa", "bbb", "ccc", "ddd"] anotherPerson.friends = ['ano1', 'ano2']; //虽然也是friends 但是这个friends后面紧接着是一个赋值符号 //所以这里是为anotherPerson创建一个新的属性
console.log(anotherPerson.friends); //["ano1","ano2"]
console.log(yetAntherPerson); //["aaa", "bbb", "ccc", "ddd"]
关于 实例 类 原型的关系 看这个图http://www.ituring.com.cn/download/01Yi3zzVQhOo
cf1 cf2... 都是CF类的实例 cf1 cf2...都拥有一个_proto_ 属性 指向其类的原型 所以cf1改的是原型的属性 其他的实例cf2 cf3去引用原型的变量话肯定是cf1修改过后
这样感觉很不好 对不对 我希望我继承的对象的属性都是独立的 不会因为其它对象的改变而变化
下面就得说组合式继承
组合式继承使用原型链的方式对原型的属性和方法做继承 通过借用构造函数的方式实现实例属性的继承
nction SuperType(name) {
this.name = name;
this.colors = ['red'];
} SuperType.prototype = {
constructor: SuperType, // 我这里是对整个prototype做重写 所以千万不要忘了constructor属性
sayName: function() {
console.log(this.name);
}
}
// 上面可以简写为 //这样就不用手动指定constuctor的值
SuperType.prototype.sayName = function() {
console.log(this.name);
} function SubType(name, age) {
SuperType.call(this, name); //继承属性//调用了SuberType这个构造函数 //相当于这里写上了this.name=name;this.colors=xxx
this.age = age;
} SubType.prototype = new SuperType(); //注意不要写为SubType.prototype=SuperType.prototype 这样的话constructor指向就不对了
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() { //为原型添加函数 这样一来原型就有sayName sayAge两个方法了
console.log(age);
} console.log(SuperType.prototype);
console.log(SubType.prototype);
var superIns = new SuperType('super');
var subIns = new SubType('sub', 23);
console.log(superIns);
console.log(subIns);
JS 原型 & 继承的更多相关文章
- 【09-23】js原型继承学习笔记
js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...
- JS原型继承与类的继承
我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- js原型继承四步曲及原型继承图
一:js原型继承四步曲 //js模拟类的创建以及继承 //动物(Animal),有头这个属性,eat方法 //名字这个属性 //猫有名字属性,继承Animal,抓老鼠方法 //第一步:创建父类 fun ...
- JS原型继承和类式继承
前言 一个多月前,卤煮读了一篇翻译过来的外国人写的技术博客.此君在博客中将js中的类(构造)继承和原型继承做了一些比较,并且得出了结论:建议诸位在开发是用原型继承.文中提到了各种原型继承的优点,详细的 ...
- 关于js原型继承
js的每个类都有一个prototype对象 访问对象的属性时,会先访问到对象自身是否有定义这个属性 如果没有定义,就会去访问对象所属类型的prototype对象是否有此属性 原型继承就是把类型的pro ...
- js原型继承
原型链: Object(构造函数) object(类型(对象)) var o = {}; alert(typeof o); //结果是object alert(typeof Object); //结果 ...
- js原型继承深入
js采用原型继承来实现类的派生,但是原型链再深入点,我们又知道多少呢,现在不妨往下看: 先来一个原型继承: var M1 = function() { this.param = "m1's ...
- 前端面试题总结二(js原型继承)
今天这篇文章整理了JS原型和继承的一些知识点,面试的时候 基!本!都!会!问!还不快认真阅读下文,看看你还有哪些知识点需要掌握吧~ 1.原型链 基本思想:利用原型让一个引用类型继承另外一个引用类型的 ...
- JS 原型继承的几种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- git、githup使用
一.git安装.配置 git安装: root@ubuntu~# apt-get install git git配置githup/自己的git服务器端账号, 即在用户的home目录下生成.gitco ...
- C#DataTable DataSet DataRow区别详解
DataSet 是C#中用来存储数据库数据的.其实,它的作用是在内存中模拟数据库.我们现实生活中的数据库从大到小的基本结构类似于:数据库实例,表,列,行.在C#语言中,我们在内存中也模拟出了一个这样的 ...
- java中关于线程间协作所用关键字synchronized,wait,notify的用法
wait/notify()关键字适用于一个线程通知另一个线程所需的条件状态已就绪,最常用于线程在循环中休眠直到获取特定条件的场景. 例如,一个线程一直等待直到队列中有一个组件能够处理:当组件添加到队列 ...
- matlab如何保存figure中去掉白边的图片
输出图片成可直接调入的灰度图,设置输出图片空白边距,以及调整图片大小,纵横比. 一.先显示图片,imshow.如果是plot,或者newplot,直接看“三”.imshow(strain_image, ...
- My blog
欢迎啦……嘿嘿 http://blog.csdn.net/zuguodexiaoguoabc http://blog.sina.com.cn/u/3914181130
- Oracle包的概念
转自:http://www.cnblogs.com/lovemoon714/archive/2012/02/29/2373695.html 1.为什么要使用包? 答: 在一个大型项目中,可 ...
- 查看SQLServer数据库信息的SQL语句
--查看数据库中的表信息, --包括(表名,记录数,保留空间,使用空间,索引使用空间,未用空间) exec sp_MSForEachTable @precommand=N'create table # ...
- 项目需要简单些了个WEB APP 的弹出窗
var diag = { showDlg:'',//需要显示的DIV rushdiv:"<div id=v style='top:0;position: absolute;z-inde ...
- hdu 4628 Pieces 状压dp
题目链接 枚举所有状态, 1表示这个字符还在原来的串中, 0表示已经取出来了. 代码中j = (j+1)|i的用处是枚举所有包含i状态的状态. #include <iostream> #i ...
- .NET(C#):觉察XML反序列化中的未知节点
原文 www.cnblogs.com/mgen/archive/2011/12/12/2284554.html 众所周知XML是可以扩展的,XML的元素可以靠名称识别而不是只按照未知识别.在 XML反 ...