类与继承
课程目标
- 知道组合寄生继承,知道class继承。
- 知道怎么创建类function + class。
课程内容
0-25分,面向对象的概念
25-60分,对象的创建
60-100分,继承
类
- ES6 class, extends;
- OOP的思想;
- 设计模式; ORM;
面向过程 和 面向对象
object oriented programming
如果我们要吃一道菜:
从面向过程的角度
// 回锅肉
// 养猪、获取猪肉、煮肉、炒、端盘、吃。
getPork();
cookDish();
haveDinner();
从面向对象的角度
-> 吃。
什么是面向对象?-- 一切皆对象。
cooker.deal(pork) -> reCookedPork
me.eat(reCookedPork)
从函数式编程的角度
pig -> pork -> reCookedPork
pig.getBigger()
.killed()
.cook()
[1,2,3,4,5].map(item => item * 2)
.filter(item => item > 10)
.join(',')
JS 对象的创建
创建一个对象有哪些方式?
Object.create();
Object.create 创建了一个对象;
let p = Object.create(q) -> p.proto = q;
p 的原型,指向了 q;
当我需要调用p对象的一个方法或者属性的时候,如果p 上面没有,我回去 q 上去找。
var obj = {};
obj.proto = Object.prototype;
let p = Object.create({})
相当于:
let p = Object.create(obj)
相当于:p.proto = obj;
p.proto.proto = Object.prototype;
{} – Object.create(Object.prototype);
new Function();
- 创建了一个对象;
- 该对象的原型,指向了这个 Function(构造函数)的 prototype;
- 该对象实现了这个构造函数的方法;
- 根据一些特定情况返回对象
- 如果没有返回值,则返回创建的对象;
- 如果有返回值,是一个对象,则返回该对象;
- 如果有返回值,不是个对象,则返回创建的对象;
function newObj(Father) {
if(typeof Father !== "function") {
throw new Error("new operator function the frist param must be a function!")
}
var obj = Object.create(Father.prototype);
var result = Father.apply(obj, Array.prototype.slice.call(arguments, 1));
return result && typeof result === "object" && result !== null ? result : obj;
}
// newObj(Person, name, age)
function Person(name, age) {
this.name = name;
this.age = age;
}
var p = new Person();
// Person 是构造函数。
p.__proto__ === Person.prototype // = { ..., constructor: Person };
Person.prototype.constructor === Person;
p.constructor === Person;
继承
其实,实现一个继承,主要就是两个部分:
- 使用父类的构造函数的方法;
- 让对象的原型链指向父类;
原型链继承
function Parent() {
this.name = "father";
}
Parent.prototype.getName = function() {
console.log(this.name);
}
function Child(){};
// Child.prototype.__proto__ = Parent.prototype
Child.prototype = new Parent();
Child.prototype.constructor = Child;
// 隐含的问题:
// 1. 如果有属性是引用类型,一旦某个实例,修改了这个属性,所有的都会被改;
// 2. 创建 Child 的时候不能传参数;
构造函数继承
// 想办法把Parent 上的属性和方法,添加到 Child 上面去,而不是都存在在原型对象上,防止被实例共享;
function Parent(actions, name) {
this.actions = ['eat','work', 'sleep'];
this.name = 'parentName';
}
function Child(play){
Parent.apply(this, Array.prototype.slice.call(arguments, 1));
this.play = play;
}
// 隐含的问题
// 1. 属性或者方法向被继承的话,只能在构造函数中定义;
// 2. 如果方法在构造函数中定义了,那么每次创建实例都会创建一遍方法。
组合继承
function Parent(actions, name) {
this.actions = ['eat', 'work', 'sleep'];
this.name = 'parentName';
}
Parent.prototype.work = function() {
console.log(`${this.name} coding evenyday...`)
}
function Child(play){
//
Parent.apply(this, Array.prototype.slice.call(arguments, 1));
this.play = play;
}
// 问题:
// Child.prototype.__proto__ = Parent.prototype;
Child.prototype = new Parent();
Child.prototype.constructor = Child;
组合寄生式继承
function inherit() {
}
function Parent(actions, name) {
this.actions = ['eat', 'work', 'sleep'];
this.name = 'parentName';
}
Parent.prototype.work = function() {
console.log(`${this.name} coding evenyday...`)
}
function Child(play){
//
Parent.apply(this, Array.prototype.slice.call(arguments, 1));
this.play = play;
}
// 问题:
Child.prototype = Object.create(Parent.prototype);
// Child.prototype = inherit(Parent.prototyep)
Child.prototype.constructor = Child;
es6 继承
class A{
}
class B extends A {
constructor() {
super();
// this.xxx
}
}
// super 作为函数调用时,要求自雷必须执行一次。
// 因为子类自己的 this 对象,必须通过父类的构造函数完成。
// es6 继承, 会继承静态的方法和属性。
// @antv
// 点、线、面
class XXX extends React.Component {
}
this, 闭包, 继承
- 《高级程序设计》
- 《JavaScript设计模式与开发实践》 - 前两章
- 《你不知道的JavaScript》
请实现一个组合寄生继承
function inherit() {
}
function Parent(actions, name) {
this.actions = ['eat', 'work', 'sleep'];
this.name = 'parentName';
}
Parent.prototype.work = function() {
console.log(`${this.name} coding evenyday...`)
}
function Child(play){
//
Parent.apply(this, Array.prototype.slice.call(arguments, 1));
this.play = play;
}
// 问题:
Child.prototype = Object.create(Parent.prototype);
// Child.prototype = inherit(Parent.prototyep)
Child.prototype.constructor = Child;
new 关键字做了什么?
- 创建了一个对象;
- 该对象的原型,指向了这个 Function(构造函数)的 prototype;
- 该对象实现了这个构造函数的方法;
- 根据一些特定情况返回对象
- 如果没有返回值,则返回创建的对象;
- 如果有返回值,是一个对象,则返回该对象;
- 如果有返回值,不是个对象,则返回创建的对象;
请实现一个 new 函数
function newObj(Father) {
if(typeof Father !== "function") {
throw new Error("new operator function the frist param must be a function!")
}
var obj = Object.create(Father.prototype);
var result = Father.apply(obj, Array.prototype.slice.call(arguments, 1));
return result && typeof result === "object" && result !== null ? result : obj;
}
Object.create 的参数,如何和 {} 的结果保持一致?
使用 Object.create(Object.prototype)
相当于 直接定义一个 {}
对象。
Object.create(null) 有何问题
没有 Object 的 原型方法。