1.组合继承 (JavaScript 中最常用的继承模式 )

  (position: page168)

(书中定义了两个变量名 SuperType   SubType  乍一看 感觉不太能区分,我将改为 a b ,更加明显区分开来这是两个东西。)

function a(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
a.prototype.sayName = function(){
  alert(this.name);
} function b(name, age){
  //继承属性
  a.call(this, name);
  this.age = age;
}
//继承方法
b.prototype = new a();
b.prototype.constructor = b;
b.prototype.sayAge = function(){
  alert(this.age);
};
var instance1 = new b("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black" instance1.sayName(); //"Nicholas"; instance1.sayAge(); //29 var instance2 = new b("Greg", 27);
alert(instance2.colors); //"red,blue,green" instance2.sayName(); //"Greg"; instance2.sayAge(); //

完成继承的思路:

  使用原型链实现对原型属性和方法的继承, 使用构造函数来实现对实例属性的继承。


  在这个例子中, a构造函数定义了两个属性: name 和 colors。 a的原型定义了一个方法 sayName()。 b构造函数在调用 a构造函数时传入了 name 参数,紧接着又定义了它自己的属性 age。然后,将 a的实例赋值给 b的原型,

然后又在该新原型上定义了方法 sayAge()。这样一来,就可以让两个不同的 b 实例既分别拥有自己属性——包括 colors 属性,又可以使用相同的方法了。 

 

2.寄生组合式继承 (实现基于类型继承的最有效方式 )

function object(o){
  function F(){}
  F.prototype = o;
  return new F();
}
function inheritPrototype(subType, superType){
  var prototype = object(superType.prototype); //创建对象
  prototype.constructor = subType; //增强对象
  subType.prototype = prototype; //指定对象
}
function a(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
a.prototype.sayName = function(){
  alert(this.name);
};
function b(name, age){
  a.call(this, name);
  this.age = age;
}
inheritPrototype(b, a); b.prototype.sayAge = function(){
  alert(this.age);
}; // 调用
var instance1 = new b("Nicholas", 29); instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black" instance1.sayName(); //"Nicholas"; instance1.sayAge(); //29 var instance2 = new b("Greg", 27); alert(instance2.colors); //"red,blue,green" instance2.sayName(); //"Greg"; instance2.sayAge(); //27

  

  

读书笔记-JavaScript高级程序设计(1)的更多相关文章

  1. 读书笔记 - javascript 高级程序设计 - 第二章 在Html中使用JavaScript

    1 <script>的6个属性 async  立即下载当前script标签的外部脚本 但不能影响别的 charset 没用了 defer  文档显示之后再执行脚本,只对外部脚本有效 lan ...

  2. 读书笔记 - javascript 高级程序设计 - 第一章 简介

      第一章 简介   诞生时间 1995 最初用途 客服端验证 第一版标准 注意是标准 1997年 Ecma-262  一个完整的js实现由三部分组成 ECMAScript DOM 文档对象模型 BO ...

  3. 读书笔记 - js高级程序设计 - 第十五章 使用Canvas绘图

    读书笔记 - js高级程序设计 - 第十三章 事件   canvas 具备绘图能力的2D上下文 及文本API 很多浏览器对WebGL的3D上下文支持还不够好   有时候即使浏览器支持,操作系统如果缺缺 ...

  4. 读书笔记 - js高级程序设计 - 第十章 DOM

      文档元素 是文档的最外层元素,在Html页面中,文档元素始终都是<html>元素 在xml中,任何元素都可以是文档元素 Node类型 Node.ELEMENT_NODE 元素 Node ...

  5. 读书笔记 - js高级程序设计 - 第八章 BOM

      BOM的核心对象是window 它表示浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过js访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在网 ...

  6. 读书笔记 - js高级程序设计 - 第十二章 DOM2和DOM3

      Node类型的变化   访问元素的样式 myDiv.style.backgroundColor = "red" myDiv.style.width = "100px& ...

  7. 读书笔记 - js高级程序设计 - 第十一章 DOM扩展

      对DOM的两个主要的扩展 Selectors API HTML5  Element Traversal 元素遍历规范 querySelector var body = document.query ...

  8. 读书笔记 - js高级程序设计 - 第七章 函数表达式

      闭包 有权访问另一个函数作用域中的变量的函数 匿名函数 函数没有名字 少用闭包 由于闭包会携带包含它的函数的作用域,因此会比其它函数占用更多的内存.过度使用闭包可能会导致内存占用过多,我们建议读者 ...

  9. 读书笔记 - js高级程序设计 - 第六章 面向对象的程序设计

      EcmaScript有两种属性 数据属性 和 访问器属性 数据属性有4个特性 Configurable Enumerable Writable Value   前三个值的默认值都为false   ...

随机推荐

  1. Gerrit 添加用户

    使用ssh添加用户 ssh name@localhost -p 29418 gerrit create-account username --email username@email --full-n ...

  2. flask token认证

    在前后端分离的项目中,我们现在多半会使用token认证机制实现登录权限验证. token通常会给一个过期时间,这样即使token泄露了,危害期也只是在有效时间内,超过这个有效时间,token过期了,就 ...

  3. 一篇博客带你入门Flask

    一. Python 现阶段三大主流Web框架 Django Tornado Flask 对比 1.Django 主要特点是大而全,集成了很多组件,例如: Models Admin Form 等等, 不 ...

  4. MyBatis 传List参数 nested exception is org.apache.ibatis.binding.BindingException: Parameter 'idList' not found.

    在MyBatis传入List参数时,MyBatis报错:nested exception is org.apache.ibatis.binding.BindingException: Paramete ...

  5. js语言规范_ES5-6-7_个人总结

    ## **理解ES** 1. 全称: ECMAScript 2. js语言的规范 3. 我们用的js是它的实现 4. js的组成   * ECMAScript(js基础)   * 扩展-->浏览 ...

  6. 基于vue现有项目的服务器端渲染SSR改造

    前面的话 不论是官网教程,还是官方DEMO,都是从0开始的服务端渲染配置.对于现有项目的服务器端渲染SSR改造,特别是基于vue cli生成的项目,没有特别提及.本文就小火柴的前端小站这个前台项目进行 ...

  7. Centos6 iptables 防火墙设置【转】

    1.指令 vi /etc/sysconfig/iptables 添加以下内容和要开放的端口 # Firewall configuration written by system-config-fire ...

  8. Forget Guava: 5 Google Libraries Java Developers Should Know

    Forget Guava: 5 Google Libraries Java Developers Should Know Published on 2016 7 13 Somenath PandaFo ...

  9. jpg、png格式的图片转换成webp后颜色失真的问题

    今天简单的试用了一下 cweb.exe 将 jpg, png 格式的图片转换成 webp 格式. 我今天下载的是当前最新版:1.0.0 cwebp 3.jpg  -q 85 -o 3.webp 发现图 ...

  10. 四大解析器(BeautifulSoup、PyQuery、lxml、正则)性能比较

    用标题中的四种方式解析网页,比较其解析速度.当然比较结果数值与电脑配置,python版本都有关系,但总体差别不会很大. 下面是我的结果,lxml xpath最快,bs4最慢 ==== Python v ...