博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【前端笔记】浅谈js继承
阅读量:5036 次
发布时间:2019-06-12

本文共 2307 字,大约阅读时间需要 7 分钟。

我们先想想我们用js最后要怎样实现面向对象的编程。事实上我们必须用上原型链这种东西。

我们的父类superType有属性和方法,并且一些能被子类subType继承,一些能被覆盖,但是丝毫不会影响到父类。那么我们可以这样定义:父类子类同时拥有独立的属性,但是共享父类被继承的方法。

继承是靠prototype实现的。

class实现

我们最理想化的js面向对象es6已经帮我们做出来了,我们可以先试下es6的,然后再用es5实现这种效果。

class Person {  constructor(age) {    this.age = age;  }  getAge() {    console.log(`${this.age} yrs old`);  }}class Student extends Person{  constructor(name, age) {    super(age);    this.name = name;  }  getName() {    console.log(`his name is ${this.name}`);  }}var person1 = new Person(11);var tom = new Student('tom',16)

可见,Person作为父类,拥有age和getAge()两个可以被继承的属性和方法,子类Student调用super()就可以继承他的属性age,并且拥有自己独立的属性name,两者的属性不冲突,以及共有的方法getAge(),独立方法getName()。

到这里我们还看不出什么眉目,因为看起来是如此的简单。现在我们来复杂化一下,来看这里涉及的prototype和constructor。

分析

由Person新建出来的对象person1,person1.constructor是Person,person1.[[prototype]]是{constructor,getAge},而Person.prototype也是{constructor,getAge},而Person.prototype.constructor是Person;

由Student新建的对象tom,tom.constructor是Student,tom.[[prototype]]是{constructor,getName},Student.prototype也是{constructor,getName},Student.prototype.constructor是Student,来到这里,没什么不同,但是原型链的魅力就在于,原型可以串成一条链,此时为什么tom能访问到getAge这个函数,正是因为tom的原型{constructor,getName}里还有一个原型{constructor,getAge},也就是tom.[[prototype]].[[prototype]]是Person.prototype。

传统方法实现

弄到这里我们清楚我们要怎么做了。就是新建一个构造函数,指定它的属性和原型函数。然后把它的原型弄出来作为一个新的对象,将这个对象的constructor指定为新的构造函数,这样新的prototype就做好了,大家可以共用方法。再来新建一个构造函数,用call方法借用父类构造函数,复制它的属性,在把prototype指定为刚刚建好的prototype。这样就大功告成,新的子类拥有父类的属性,并且不影响父类的属性,还能有自己的属性,同时继承了父类的方法,不必重复声明相同的函数浪费空间。

/** * 寄生组合 */// 复制一个对象作为新对象的prototype,返回新对象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 Person(age) {  this.age = age;  this.course = ['english','math'];}// 父类原型Person.prototype.getAge = function() {  console.log(`${this.age} yrs old`);}// 子类,借用函数复制父类属性function Student(name, age) {  Person.call(this, age);  this.name = name;}// 给子类以父类的原型inheritPrototype(Student, Person);// 定义子类的原型方法Student.prototype.getName = function() {  console.log(`his name is ${this.name}`);}var tom = new Student('tom',16)

个人愚见,不喜勿喷,欢迎指导和交流。

转载于:https://www.cnblogs.com/dkplus/p/9377429.html

你可能感兴趣的文章
android调试debug快捷键
查看>>
【读书笔记】《HTTP权威指南》:Web Hosting
查看>>
Inoodb 存储引擎
查看>>
数据结构之查找算法总结笔记
查看>>
Linux内核OOM机制的详细分析
查看>>
Android TextView加上阴影效果
查看>>
Requests库的基本使用
查看>>
C#:System.Array简单使用
查看>>
C#inSSIDer强大的wifi无线热点信号扫描器源码
查看>>
「Foundation」集合
查看>>
算法时间复杂度
查看>>
二叉树的遍历 - 数据结构和算法46
查看>>
类模板 - C++快速入门45
查看>>
[转载]JDK的动态代理深入解析(Proxy,InvocationHandler)
查看>>
centos7 搭建vsftp服务器
查看>>
RijndaelManaged 加密
查看>>
Android 音量调节
查看>>
HTML&CSS基础学习笔记1.28-给网页添加一个css样式
查看>>
windows上面链接使用linux上面的docker daemon
查看>>
Redis事务
查看>>