这一章,估计是js最操蛋的一部分内容。
现代方法:
远古方法:
* 《Javascript面向对象编程(一):封装》【可略,已看】
* 《Javascript面向对象编程(二):构造函数的继承》
* 《Javascript面向对象编程(三):非构造函数的继承》
热身一
调用Object.create(..) 会凭空创建一个“新”对象并把新对象内部的 [[Prototype]] 关联到你指定的对象。
既然是新对象,也就没有必要让o1的属性继承Base里的this.a。
热身二
var animal = function() {};
var dog = function() {}; // 本质是 new Function(), animal.price = 2000; // 原型预备役,先赋值
dog.prototype = animal; // want to share properties in animal
console.log(dog.price) // undefined, 其实没有“继承”到
/**
* 原型链是依赖于__proto__,而不是prototype!
* 所以,dog.prototype赋值,有屁用!
*/
原理:
dog's __proto__ ----> dog的构造函数的原型,也就是Function的原型
dog.__proto__ == Function.prototype Function.prototype没有price, 当然dog.price就没有继承到东西 var tidy = new dog();
console.log(tidy.price) // 2000, 反而“继承”到了 Jeff: tidy.__proto__ == dog.prototype == animal
可见,通过_proto__,让tidy与dog有关;但dog与animal之间却没有建立起这层关系。
也就是说:dog不能继承,但dog的实例反而能继承animal的属性。
对象之间的"继承"的五种方法
父类 - 构造函数形式
function Animal(){
this.species = "动物";
}
一、 构造函数绑定
Ref: [JS] Topic - hijack this by "apply" and "call"
function Cat(name,color){ Animal.apply(this, arguments); // 如果是当前对象中没有的属性,就改变this,在"父类"中找 this.name = name;
this.color = color;
} var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物
二、 prototype模式
Cat.prototype = new Animal(); // 同理“热身二” /**
* Cat.prototype.constructor 指向变化: Cat --> Animal
*/
Cat.prototype.constructor = Cat; // 有必要么?但是,第二行又是什么意思呢?
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物
极为重要的一点:prototype改变后,需要再调整回来,为了安全,避免继承链的紊乱。
原型对象的constructor属性,原本就是指向正确的,
现在Cat.prototype都变为了new的新对象,那么也要至少保证Cat.prototype.constructor仍然是指向Cat的。
这个潜规则。
三、 直接继承prototype
与前一种方法相比,这样做的优点是效率比较高(不用执行和建立Animal的实例了),比较省内存。
缺点是 Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到Animal.prototype。
function Animal(){ }
Animal.prototype.species = "动物"; Cat.prototype = Animal.prototype; ...
...
四、 利用空对象作为中介
由于"直接继承prototype"存在上述的缺点,所以就有第四种方法,利用一个空对象作为中介。
var F = function(){}; // F是空对象,所以几乎不占内存
F.prototype = Animal.prototype; // 这里的技巧: 利用空对象 做了过渡 Cat.prototype = new F(); // 不会影响到Animal的prototype对象 Cat.prototype.constructor = Cat;
封装成一个函数,便于使用。
function extend(Child, Parent) {
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.uber = Parent.prototype;
}
为子对象设一个uber属性,这个属性直接指向父对象的prototype属性。(uber是一个德语词,意思是"向上"、"上一层")这等于在子对象上打开一条通道,可以直接调用父对象的方法。
这一行放在这里,只是为了实现继承的完备性,纯属备用性质。
使用方式:
extend(Cat,Animal);
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物
五、 拷贝继承
function Animal(){}
Animal.prototype.species = "动物"; function extend2(Child, Parent) { var p = Parent.prototype;
var c = Child.prototype; for (var i in p) {
c[i] = p[i];
} c.uber = p;
} extend2(Cat, Animal);
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物
父类 - 普通对象形式
var Chinese = {
nation:'中国'
};
两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现"继承"。
可以使用:非构造函数"的继承。
一、object()方法
function object(o) {
function F() {}
F.prototype = o; // 把子对象的prototype属性,指向父对象,从而使得子对象与父对象连在一起。
return new F();
} 1. 第一步先在父对象的基础上,生成子对象
var Doctor = object(Chinese); // 这里没有在外部显式的new,跟构造函数的继承有点用法的区别 2. 然后,再加上子对象本身的属性
Doctor.career = '医生'; 3. 子对象已经继承了父对象的属性
alert(Doctor.nation); //中国
二、浅拷贝
这样的拷贝有一个问题。那就是,如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能。
详见原链接:Javascript面向对象编程(三):非构造函数的继承
function extendCopy(p) {
var c = {};
for (var i in p) {
c[i] = p[i];
} c.uber = p;
return c;
} var Doctor = extendCopy(Chinese);
Doctor.career = '医生';
alert(Doctor.nation); // 中国
三、深拷贝
目前,jQuery库使用的就是这种继承方法。
function deepCopy(p, c) { var c = c || {}; for (var i in p) { if (typeof p[i] === 'object') { c[i] = (p[i].constructor === Array) ? [] : {}; deepCopy(p[i], c[i]); } else { c[i] = p[i]; }
} return c;
}
使用方式:
var Doctor = deepCopy(Chinese); // 现在,给父对象加一个属性,值为数组。然后,在子对象上修改这个属性:
Chinese.birthPlaces = ['北京','上海','香港'];
Doctor.birthPlaces.push('厦门'); // 这时,父对象就不会受到影响了。
alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港
让我们来瞧瞧,有了Class类之后会如何?
1. 子类需要得到this
对象
2. 子类必须在constructor
方法中调用super
方法
3. 只有调用super
之后,才可以使用this
关键字,否则会报错
4. 父类的静态方法,也会被子类继承
Parent类:
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
Child类:
class ColorPoint extends Point {
constructor(x, y, color) { // 会被默认添加
super(x, y); // 调用父类的constructor(x, y), 这里的x,y是父类的,所以要super中作为了参数
this.color = color;
} toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}
Object.getPrototypeOf
方法
可以用来从子类上获取父类
Object.getPrototypeOf(ColorPoint) === Point
// true
super 关键字
注意,
super
虽然代表了父类A
的构造函数,但是返回的是子类B
的实例。
super
指向父类的原型对象。
即super
内部的this
指的是B
,因此super()
在这里相当于:
A.prototype.constructor.call(this)。
- super不是指向父类!
例一:super.p无法调用到this.p = 2
例二:只能调用父类的prototype上
例三:this的不变性【子类普通方法中通过super
调用父类的方法时,虽然是父类方法内部的this,却其实是
指向当前的子类实例】
例四:超级变态,带我娓娓道来!
class A {
constructor() {
this.x = 1;
}
} class B extends A {
constructor() {
super();
this.x = 2;
super.x = 3; // 其实是把上面的x变了,因为在这种情况下,super.x == this.x
console.log(super.x); // undefined
console.log(this.x); //
}
} let b = new B();
附加题:对于super.x的设计已经无语。
- super指向父类!
例五:用在静态方法之中,这时super
将指向父类,而不是父类的原型对象。
class Parent {
static myMethod(msg) {
console.log('static', msg);
} myMethod(msg) {
console.log('instance', msg);
}
} ------------------------------------- class Child extends Parent {
static myMethod(msg) {
super.myMethod(msg);
} myMethod(msg) {
super.myMethod(msg);
}
} Child.myMethod(1); // static 1 var child = new Child();
child.myMethod(2); // instance 2
类的 prototype 属性和__proto__属性
Class 作为构造函数的语法糖,同时有prototype
属性和__proto__
属性,因此同时存在两条继承链。
(1)子类的__proto__
属性,表示构造函数的继承,总是指向父类。
(2)子类prototype
属性的__proto__
属性,表示方法的继承,总是指向父类的prototype
属性。
这算是子类沿着线索找寻父类的一个办法。
class A {
} class B extends A {
} B.__proto__ === A // true (1)构造函数的继承
B.prototype.__proto__ === A.prototype // true (2)方法的继承
貌似是讲述本质,实现原理。但哥不是很关心。
class A {
} class B {
} // B 的实例 继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype); // ----> // B 继承 A 的静态属性
Object.setPrototypeOf(B, A); const b = new B();
解释:
Object.setPrototypeOf = function (obj, proto) {
obj.__proto__ = proto;
return obj;
}
这两条继承链,可以这样理解:【记住这个就可以了】
(1) 作为一个对象,子类(B
)的原型(__proto__
属性)是父类(A
);
(2) 作为一个构造函数,子类(B
)的原型对象(prototype
属性)是父类的原型对象(prototype
属性)的实例。
extends 的继承目标
先复习一下:
第一种特殊情况,子类继承Object
类。
第二种特殊情况,不存在任何继承。
第三种特殊情况,子类继承null。
原生构造函数的继承
class MyArray extends Array {
constructor(...args) {
super(...args);
}
} var arr = new MyArray();
arr[0] = 12;
arr.length // arr.length = 0;
arr[0] // undefined
ECMAScript 的原生构造函数大致有下面这些。
- Boolean()
- Number()
- String()
- Array()
- Date()
- Function()
- RegExp()
- Error()
- Object()
自定义Error
子类的例子,可以用来定制报错时的行为。
class ExtendableError extends Error {
constructor(message) {
super();
this.message = message;
this.stack = (new Error()).stack;
this.name = this.constructor.name;
}
} class MyError extends ExtendableError {
constructor(m) {
super(m);
}
} var myerror = new MyError('ll');
myerror.message // "ll"
myerror instanceof Error // true
myerror.name // "MyError"
myerror.stack
// Error
// at MyError.ExtendableError
// ...
Mixin 模式的实现
Mixin 指的是多个对象合成一个新的对象,新对象具有各个组成成员的接口。
const a = {
a: 'a'
};
const b = {
b: 'b'
};
const c = {...a, ...b}; // {a: 'a', b: 'b'}
下面是一个更完备的实现,将多个类的接口“混入”(mix in)另一个类。
function mix(...mixins) {
class Mix {} for (let mixin of mixins) {
copyProperties(Mix, mixin); // 拷贝实例属性
copyProperties(Mix.prototype, mixin.prototype); // 拷贝原型属性
} return Mix;
} function copyProperties(target, source) {
for (let key of Reflect.ownKeys(source)) {
if ( key !== "constructor"
&& key !== "prototype"
&& key !== "name"
) {
let desc = Object.getOwnPropertyDescriptor(source, key);
Object.defineProperty(target, key, desc);
}
}
}
有点难,没看懂。
(完)
[JS] ECMAScript 6 - Inheritance : compare with c#的更多相关文章
-
[JS] ECMAScript 6 - Variable : compare with c#
前言 范围包括:ECMAScript 新功能以及对象. 当前的主要目的就是,JS的学习 --> ECMAScript 6 入门 let 命令 js 因为let, i的范围限制在了循环中. var ...
-
[JS] ECMAScript 6 - Class : compare with c#
Ref: Class 的基本语法 Ref: Class 的基本继承 许多面向对象的语言都有修饰器(Decorator)函数,用来修改类的行为.目前,有一个提案将这项功能,引入了 ECMAScript. ...
-
[JS] ECMAScript 6 - Prototype : compare with c#
开胃菜 prototype 对象 JavaScript 语言的继承则是通过“原型对象”(prototype). function Cat(name, color) { // <----构造函数 ...
-
[JS] ECMAScript 6 - Async : compare with c#
一段引言: Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大. 它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对 ...
-
[JS] ECMAScript 6 - Array : compare with c#
扩展运算符(spread) 先复习下 rest 参数. (1) argument模式,但不够好. // https://blog.csdn.net/weixin_39723544/article/de ...
-
[JS] ECMAScript 6 - Object : compare with c#
Ref: 对象的扩展 Outline: 属性的简洁表示法 属性名表达式 方法的 name 属性 Object.is() Object.assign() 属性的可枚举性和遍历 Object.getOwn ...
-
[JS] ECMAScript 6 - String, Number, Function : compare with c#
字符串的扩展 正则的扩展 数值的扩展 函数的扩展 字符串的扩展 js 字符的 Unicode 表示法 codePointAt() String.fromCodePoint() 字符串的遍历器接口 at ...
-
[JS] ECMAScript 6 - Set &; Map : compare with c#
Ref: Set 和 Map 数据结构 Day 0 - 1所学
-
[Node.js] ECMAScript 6中的生成器及koa小析
原文地址:http://www.moye.me/2014/11/10/ecmascript-6-generator/ 引子 老听人说 koa大法好,这两天我也赶了把时髦:用 n 安上了node 0.1 ...
随机推荐
-
【Matplotlib】 标注一些点
相关的文档: Annotating axis annotate() command 标注的代码如下: ... t = 2 * np.pi / 3 plt.plot([t, t], [0, np.cos ...
-
通知(NSNotificationCenter)
// 监听加载更多的通知 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(loadMoreDeals ...
-
ASP.NET html转图片
using System.IO; using System.Drawing; using System.Threading; using System.Windows.Forms; public cl ...
-
再看ADO对象模型
在敲学生管理系统之前,我们就学习过ADO的有关知识.但是昨天被问到ADO的几个对象,顿时无言!为什么会出现这样的结果呢,明明是学习过了,而且也实践过(红皮书的五个例子).这充分说明了,在以往的学习过程 ...
-
HTML5 video 事件
1.获取视频时间长度 当视频载入video后,使用 onloadedmetadata 事件获取视频的时间长度. video.onloadedmetadata = function () { var v ...
-
Android文件存储使用参考
可能遇到的问题 android系统自身自带有存储,另外也可以通过sd卡来扩充存储空间.前者好比pc中的硬盘,后者好移动硬盘. 前者空间较小,后者空间大,但后者不一定可用. 开发应用,处理本地数据存取时 ...
-
第一节: dingo/API 最新版 V2.0 之安装讲解(连载)
我发现关于dingo/API V2.0的资料少之又少,应该也是发布时间不久的原因.下面,我就来给大家讲解(翻译)下官方的英文文档,如果有说的不对的地方,请指正.先附上,官网wiki地址https:// ...
-
Lodop打印设计里的 打印项对齐
打印设计界面里,有四个对齐的图标:(1)第一个图标是左右对齐方式,该图标下有四种左右对齐方式.(2)第二个图标是上下对齐方式,该图标下有四种上下对齐方式.(3)第三个图标是等宽对齐,该图标下有三种等宽 ...
-
pat 1051Pop Sequence
模拟栈的过程,一开始我是用的cin来判断每行的每一个数字,然后判断回车结束.有一个点会超时,答案用数组先记录序列的方法非常好.有一个注意点就是访问s.top()的时候先要保证s.size()>0 ...
-
js 基本
JavaScrip组成:1.ECMAScrip --核心2.DOM 文档对象模型3.BOOM 浏览器对象模型 JavaScrip写法分类:1.内联式写在标签内以属性为表现:2.内嵌式以script标签 ...