读书笔记-JavaScript高级程序设计(1)

简介:   1.组合继承 (JavaScript 中最常用的继承模式 )  (position: page168)(书中定义了两个变量名 SuperType   SubType  乍一看 感觉不太能区分,我将改为 a b ,更加明显区分开来这是两个东西。

 

 

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(); //27

完成继承的思路:

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


 

  在这个例子中, a构造函数定义了两个属性: name colorsa的原型定义了一个方法 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

  

  

 

目录
相关文章
|
3月前
|
存储 JavaScript 算法
JS程序设计的常用套路
亲尝百草,方知甘苦。套路,通常有助于提升代码的可读性、扩展性和效率。以下是作者工作中总结出来的一部分代码套路,分享给大家。
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的程序设计基础视频学习系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的程序设计基础视频学习系统附带文章和源代码部署视频讲解等
35 0
|
人工智能 JavaScript 前端开发
JavaScript高级程序设计继承(二)
有时候可能需要定义这样一个类,它可供其他类继承,但本身不会被实例化。虽然 ECMAScript 没 有专门支持这种类的语法 ,但通过 new.target 也很容易实现。new.target 保存通过 new 关键字调 用的类或函数。通过在实例化时检测 new.target 是不是抽象基类,可以阻止对抽象基类的实例化:
147 0
|
存储 JavaScript 前端开发
《JavaScript高级程序设计》__ 作用域&内存
前言 大家好,我是HoMeTown,web领域有一本神书大家应该都有看过,这本书我看过两遍,但是每次看都是粗粗的略过一些重要的知识点,甚至一些面试过程中的问题,在这本书里都能找到答案。
38038 3
《JavaScript高级程序设计》__ 作用域&内存
|
JavaScript 前端开发
《JavaScript高级程序设计》__ 语言基础(上)(1)
前言 大家好,我是HoMeTown,web领域有一本神书大家应该都有看过,这本书我看过两遍,但是每次看都是粗粗的略过一些重要的知识点,甚至一些面试过程中的问题,在这本书里都能找到答案。
153 3
|
移动开发 JavaScript 前端开发
《JavaScript高级程序设计》__ HTML中的JavaScript
前言 大家好,我是HoMeTown,web领域有一本神书大家应该都有看过,这本书我看过两遍,但是每次看都是粗粗的略过一些重要的知识点,甚至一些面试过程中的问题,在这本书里都能找到答案
128 3
|
JavaScript 前端开发
浅习一波JavaScript高级程序设计(第4版)p7-生成器
于是乎,借着更文契机,本瓜将开启一个小系列,带你重看一遍高级程序设计4(先前只是跳着跳着看),将抽取精华,用最简单的话解释核心点、尽量把握全局、快速过一遍的同时,记录与工友们分享~~
|
设计模式 JavaScript 前端开发
浅习一波JavaScript高级程序设计(第4版)p7-迭代器
JavaScript 高级程序设计第 4 版(后简称高程4),相较于第 3 版,增加了 ES6 至 ES10 的全新内容,删除了旧版过时的内容,并在原有基础上充实了更加翔实的内容。 中文译版于 2020 年发售,妥妥的“新鲜出炉”,你要是问本瓜:当今学 JavaScript 哪家强,我只能说:红宝书第 4 版最在行。
|
存储 JavaScript 前端开发
浅习一波JavaScript高级程序设计(第4版)p6
JavaScript 高级程序设计第 4 版(后简称高程4),相较于第 3 版,增加了 ES6 至 ES10 的全新内容,删除了旧版过时的内容,并在原有基础上充实了更加翔实的内容。
|
JavaScript 前端开发
浅习一波JavaScript高级程序设计(第4版)p5
JavaScript 高级程序设计第 4 版(后简称高程4),相较于第 3 版,增加了 ES6 至 ES10 的全新内容,删除了旧版过时的内容,并在原有基础上充实了更加翔实的内容。