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. iUAP云运维平台v3.0全面支持基于K8s的微服务架构

    什么是微服务架构? 微服务(MicroServices)架构是当前互联网业界的一个技术热点,业内各公司也都纷纷开展微服务化体系建设.微服务架构的本质,是用一些功能比较明确.业务比较精练的服务去解决更大 ...

  2. lr12 websocket

    loadrunner12以上版本支持websocket,在http/html协议录制时可以直接录制websocket相关内容信息. 网上找的一个测试websocket网址:http://www.blu ...

  3. Hadoop(五)搭建Hadoop客户端与Java访问HDFS集群

    阅读目录(Content) 一.Hadoop客户端配置 二.Java访问HDFS集群 2.1.HDFS的Java访问接口 2.2.Java访问HDFS主要编程步骤 2.3.使用FileSystem A ...

  4. rocketmq双主模式

    1.官网 https://rocketmq.apache.org/ 官方安装文档 https://rocketmq.apache.org/docs/quick-start/ 2.rocketmq多主配 ...

  5. 【LOJ2586】【APIO2018】选圆圈 CDQ分治 扫描线 平衡树

    题目描述 在平面上,有 \(n\) 个圆,记为 \(c_1,c_2,\ldots,c_n\) .我们尝试对这些圆运行这个算法: 找到这些圆中半径最大的.如果有多个半径最大的圆,选择编号最小的.记为 \ ...

  6. 2.1 re 模块

    正则表达式 简单的范围的字符组 字符 量词 字符集 分组 转义字符 flags 方法  .findall() .finditer() .search() .match()  .sub() .subn( ...

  7. Django 序列化

    序列化 背景 对于Django 的queryset 对象在传递给 前端的时候,前端是无法识别的 因此需要存在一个转换过程将 queryset 对象转换成 字符串前端才可以识别 演示 QuerySet ...

  8. Magento 2 安装数据表

    Magento 2 安装数据表 第1步:安装脚本 首先,我们将为CRUD模型创建数据库表.为此,我们需要插入安装文件 app/code/Mageplaza/HelloWorld/Setup/Insta ...

  9. nginx 返回数据被截断

    nignx 代理 buffer proxy_buffers 16 512k; proxy_buffer_size 512k;   fastcgi buffer fastcgi_buffers 4 64 ...

  10. C++中使用vector.erase()需要注意的事项

    本人菜鸟一枚.. 今天在用vector.erase()的时候,发现总是不能把应该erase掉的东西erase干净. 举个栗子: vector<int> num_vec; num_vec.p ...