理解原型链

先看看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 原型 & 继承的更多相关文章

  1. 【09-23】js原型继承学习笔记

    js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...

  2. JS原型继承与类的继承

    我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  3. js原型继承四步曲及原型继承图

    一:js原型继承四步曲 //js模拟类的创建以及继承 //动物(Animal),有头这个属性,eat方法 //名字这个属性 //猫有名字属性,继承Animal,抓老鼠方法 //第一步:创建父类 fun ...

  4. JS原型继承和类式继承

    前言 一个多月前,卤煮读了一篇翻译过来的外国人写的技术博客.此君在博客中将js中的类(构造)继承和原型继承做了一些比较,并且得出了结论:建议诸位在开发是用原型继承.文中提到了各种原型继承的优点,详细的 ...

  5. 关于js原型继承

    js的每个类都有一个prototype对象 访问对象的属性时,会先访问到对象自身是否有定义这个属性 如果没有定义,就会去访问对象所属类型的prototype对象是否有此属性 原型继承就是把类型的pro ...

  6. js原型继承

    原型链: Object(构造函数) object(类型(对象)) var o = {}; alert(typeof o); //结果是object alert(typeof Object); //结果 ...

  7. js原型继承深入

    js采用原型继承来实现类的派生,但是原型链再深入点,我们又知道多少呢,现在不妨往下看: 先来一个原型继承: var M1 = function() { this.param = "m1's ...

  8. 前端面试题总结二(js原型继承)

    今天这篇文章整理了JS原型和继承的一些知识点,面试的时候  基!本!都!会!问!还不快认真阅读下文,看看你还有哪些知识点需要掌握吧~ 1.原型链 基本思想:利用原型让一个引用类型继承另外一个引用类型的 ...

  9. JS 原型继承的几种方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 数据结构(DataStructure)与算法(Algorithm)、STL应用

    catalogue . 引论 . 数据结构的概念 . 逻辑结构实例 2.1 堆栈 2.2 队列 2.3 树形结构 二叉树 . 物理结构实例 3.1 链表 单向线性链表 单向循环链表 双向线性链表 双向 ...

  2. WPF 数据绑定

    1.1绑定到对象 1.1.1.前台绑定 前台代码 5: </Grid> 1: <Grid x:Name=”GridProductDetails”> 2:   3: <Te ...

  3. 深入浅出ES6(二):迭代器和for-of循环

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 我们如何遍历数组中的元素?20年前JavaScript刚萌生时,你可能这样实现数 ...

  4. Executors线程池

    强烈建议程序员使用较为方便的 Executors 工厂方法 Executors.newCachedThreadPool()(无界线程池,可以进行自动线程回收).Executors.newFixedTh ...

  5. 最近公共祖先问题(LCA)的几种实现方式

    LCA也是很经典的内容了,我这个蒟蒻居然今天才开始弄QAQ 我太弱啦! 照例先上定义——————转自维基百科 在图论和计算机科学中,最近公共祖先是指在一个树或者有向无环图中同时拥有v和w作为后代的最深 ...

  6. PYTHON3-LIST.SORT(),SORTED()方法详解。

    python3对于排序提供两种内置方法,一是针对数组的list.sort(), 一是针对所有可迭代序列的sorted().其中list.sort()是在原数组修改,不产生新对象,所以在使用函数后使用赋 ...

  7. PCIe link up bug 分析

    Xilinx两块开发版PCIe link up时间相差很大,Virtex-6开发版PCIe link up时间超过60ms,而Virtex-7 PCIe link up时间只有~25ms.   分析过 ...

  8. C# 获取程序运行时路径

    Ø  前言 开发中,很多时候都需要获取程序运行时路径,比如:反射.文件操作等..NET Framework 已经封装了这些功能,可以很方便的使用. C# 中有很多类都可以获取程序运行时路径,我们没必要 ...

  9. 【转】WKT、SRID、EPSG概念

    http://www.cnblogs.com/jackdong/archive/2010/12/20/1911558.html 之前一直对WKT.EPSG.SRID不是很理解,总是混淆,今天看了一下, ...

  10. jQuery实现的手风琴效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...