当前位置:首页 » JavaScript技术

JS类继承常用方式发展史

2017-10-12 18:41 本站整理 浏览(12)

JS类继承常用方式发展史

涉及知识点

前言

当JS被创造出来的时候,并没有使用当时最流行的类方式,像(JAVA C++)。具体原因为:

对于有基于类的语言经验的开发人员来说,JavaScript 有点令人困惑 (如Java或C ++) ,因为它是动态的,并且本身不提供一个类实现。(在ES2015/ES6中引入了class关键字,但只是语法糖,JavaScript 仍然是基于原型的)。
参考2

1 构造函数方式继承

1.1 通过构造函数多步骤完成继承单个对象

/**
 * log-console.log的简单封装插件
 * 
 * @demo log(xxx) ==> console.log(xxx)
 * @explain 1 可以代替console.log()使用
 * @explain 2 可以运行在浏览器环境和NodeJs环境
 */
function log() {
  console.log.apply(console, arguments);
}

/**
 * Student--学生抽象类
 * @param {String} guide 职业
 */
function Student({guide}) {
  this.guide = guide;
}
Student.prototype.showGuide = function() {
  log(this.guide);
}

/**
 * People--人类
 * 
 * @want People的实例对象拥有Student的特性,且可以自己扩展
 * 扩展后不影响Student
 */
function People(props) {
  Student.call(this, props);
  this.country = props.country;
}

/**
 * 通过中间对象来实现People正确的原型链
 * 
 * @explain step1 MidFn 创建一个空函数
 * @explain step2 把MidFn函数的原型指向Student.prototype
 * @explain step3 把People原型对象指向MidFnde原型对象, MidFn的原型正好指向Student.prototype
 * @explain step4 把People原型的构造函数修复为People
 * @explain step5 People扩展方法测试是否会影响Student
 */
// step1
function MidFn() {}
// step2
MidFn.prototype = Student.prototype;
// step3
People.prototype = new MidFn();
// step4
People.prototype.construtor = People;
// step5
People.prototype.showCountry = function() {
  log(this.country);
}

const jeson = new People({
  guide: 'web前端',
  country: '中国'
});

jeson.showGuide();
jeson.showCountry();
log(jeson instanceof People); // => true
log(jeson instanceof Student); // => true

const student1 = new Student({
  guide: '全栈',
  country: 'Chinese'
});
student1.showGuide(); // => '全栈'
student1.showCountry(); // => 出错

分析 back

  • 1 通过创建一个中间对象函数,想办法将原型链修改为:
    new PrimaryStudent() ----> PrimaryStudent.prototype ----> Student.prototype ----> Object.prototype ----> null
    参考1
  • 2 为什么不 People.prototype = Student.prototype方式来继承?
    • 答:这个方法简单粗暴也是可以使用的,为什么不使用呢?1 耦合性太高了,修改其中的一个类,另一个也会受影响,而且如果有个人不知道Student.showGuide方法存在,自己写了这个方法,那么恭喜,Student.prototype.showGuide方法会被People.prototype.showGuide替换掉,2 为了解耦(追求更好的方式--提高编程水平(装B))

1.2 封装多步骤完成继承单个对象

/**
 * log-console.log的简单封装插件
 * 
 * @demo log(xxx) ==> console.log(xxx)
 * @explain 1 可以代替console.log()使用
 * @explain 2 可以运行在浏览器环境和NodeJs环境
 */
function log() {
  console.log.apply(console, arguments);
}

/**
 * Student--学生抽象类
 * @param {*} guide 职业
 */
function Student({guide}) {
  this.guide = guide;
}
Student.prototype.showGuide = function() {
  log(this.guide);
}

/**
 * People--人类
 * 
 * @want People的实例对象拥有Student的特性,且可以自己扩展
 * 扩展后不影响Student
 */
function People(props) {
  Student.call(this, props);
  this.country = props.country;
}

/**
 * inherits 封装继承的动作到inherits函数,简化代码,美化世界
 * @explain 通过封装4步骤完成继承
 */
function inherits(Child, Parent) {
  const MidFn = function() {}
  MidFn.prototype = Parent.prototype;
  Child.prototype = new MidFn();
  Child.prototype.construtor = Child;
}

/**
 * 执行继承函数实现原型继承链
 */
inherits(People, Student);

People.prototype.showCountry = function() {
  log(this.country);
}

const jeson = new People({
  guide: 'web前端',
  country: '中国'
});

jeson.showGuide(); // => 'web前端'
jeson.showCountry(); // => '中国'
log(jeson instanceof People); // => true
log(jeson instanceof Student); // => true

const student1 = new Student({
  guide: '全栈',
  country: 'Chinese'
});
student1.showGuide(); // => '全栈'
student1.showCountry(); // => 出错

分析 back

  • 1 封装继承的多步骤为一个inherits函数,简化代码参考1

1.3 Object.create()方式完成继承单个对象

/**
 * log-console.log的简单封装插件
 * 
 * @demo log(xxx) ==> console.log(xxx)
 * @explain 1 可以代替console.log()使用
 * @explain 2 可以运行在浏览器环境和NodeJs环境
 */
function log() {
  console.log.apply(console, arguments);
}

/**
 * Student--学生抽象类
 * @param {*} guide 职业
 */
function Student({guide}) {
  this.guide = guide;
}
Student.prototype.showGuide = function() {
  log(this.guide);
}

/**
 * People--人类
 * 
 * @want People的实例对象拥有Student的特性,且可以自己扩展
 * 扩展后不影响Student
 */
function People(props) {
  Student.call(this, props);
  this.country = props.country;
}

/**
 * inherits 封装继承的动作到inherits函数,简化代码,美化世界
 * @explain 通过Object.create实现继承
 */
function inherits(Child, Parent) {
  Child.prototype = Object.create(Parent.prototype);
  Child.prototype.constructor = Child;
}

/**
 * 执行继承函数实现原型继承链
 */
inherits(People, Student);

People.prototype.showCountry = function() {
  log(this.country);
}

const jeson = new People({
  guide: 'web前端',
  country: '中国'
});

jeson.showGuide(); // => 'web前端'
jeson.showCountry(); // => '中国'
log(jeson instanceof People); // => true
log(jeson instanceof Student); // => true

const student1 = new Student({
  guide: '全栈',
  country: 'Chinese'
});
student1.showGuide(); // => '全栈'
student1.showCountry(); // => 出错

分析 back

  • 1 通过ES5提供的Object.assign()完成继承
  • 2 由于new的实例对象是这种{...}JSON数据结构,实例对象通过构造函数的原型对象继承属性。而Object.assign()可以完成JSON对象的扩展参考3

2 继承多个对象

2.1 Object.create() Object.assign()实现多个对象继承

/**
 * log-console.log的简单封装插件
 * 
 * @demo log(xxx) ==> console.log(xxx)
 * @explain 1 可以代替console.log()使用
 * @explain 2 可以运行在浏览器环境和NodeJs环境
 */
function log() {
  console.log.apply(console, arguments);
}

/**
 * Student--学生抽象类
 * @param {*} guide 职业
 */
function Student(props) {
  this.guide = props.guide;
  this.class = props.class;
}
Student.prototype.showGuide = function() {
  log(this.guide);
}

/**
 * Sex--性别抽象类
 * @param {*} sex 性别
 */
function Sex({sex}) {
  this.sex = sex;
}
Sex.prototype.showSex = function() {
  log(this.sex);
}

/**
 * People--人类
 * 
 * @want People的实例对象拥有Student Sex的特性,且可以自己扩展
 * 扩展后不影响Student和Sex
 */
function People(props) {
  Student.call(this, props);
  Sex.call(this, props);
  this.country = props.country;
}

/**
 * 多个对象的继承
 * @param {Constrctor} Children 需要继承多个类的构造函数-这里为People
 * @param {Json} Parents 多个需要被继承的构造函数
 * @explain 1 实例化构造函数得到的实例对象是{...} 这种类型的对象和JSON结构一样
 * @explain 2 Object.assign(target, ...sources) 通过ES5提供的复制可枚举对象实现
 */
function inheritMore(Children, ...Parents) {
  // console.log(Parents);
  objAssigns(Children, Parents);
  Children.prototype.constrctor = Children;
}

/**
 * objAssigns 继承多个对象
 * 
 * @param Children 需要继承多个类的构造函数-这里为People
 * @param {Array} Parents 多个需要被继承的构造函数构成的对象
 */
function objAssigns(Children, Parents) {
  for (let i =0; i < Parents.length; i++) {
    Object.assign(Children.prototype, Parents[i].prototype);
  }
}

inheritMore(People, Student, Sex);


const jeson = new People({
  guide: 'web前端',
  country: '中国',
  sex: '男',
  class: '3-6'
});

People.prototype.showCountry = function() {
  log(this.country);
}

jeson.showGuide(); // => 'web前端'
jeson.showSex(); // => '男'
jeson.showCountry(); // => '中国'
log(jeson instanceof Student); // => false
log(jeson instanceof Sex); // => false
log(jeson instanceof People); // => true

/**
 * 父类扩展看子类是否继承
 */
Student.prototype.showClass = function() {
  log(this.class);
}

let tom = new People({
  class: '6-6'
})
Object.assign(People.prototype, Student.prototype); // 加上这句才能继承到父类扩展的方法
tom.showClass(); // => '6-6'

分析 back

  • 1 通过遍历多次Object.assin()完成多个对象的继承 参考4
  • 2 在继承多个对象后,如果父对象扩展了某个方法,子对象需要再次继承,怎么解决父对象扩展后,子对象需要再次继承父对象的问题呢?知道的道友可以留言

参考资料

Back