深入理解 Javascript 之继承

wuyangnju 发布于2019-08-23 10:56 / 1847人阅读

摘要：继承继承子类可以使用父类的所有功能，并且对这些功能进行扩展。类继承父类父类添加共有方法子类继承父类子类添加共有方法其中最核心的一句代码是将原型指向了父类的原型对象。

继承

继承：子类可以使用父类的所有功能，并且对这些功能进行扩展。继承的过程，就是从一般到特殊的过程。

类继承

// 父类
var supperClass = function() {
  var id = 1;
  this.name = ["js"];
  this.superVal = function() {
    console.log("supreVal is true");
    console.log(id);
  }
}
// 父类添加共有方法
supperClass.prototype.getSupperVal = function () {
  return this.superVal();
}

// 子类
var subClass = function() {
  this.subVal = function() {
    console.log("this is subVal")
  }
}

// 继承父类
subClass.prototype = new supperClass();

// 子类添加共有方法
subClass.prototype.getsubVal = function() {
  return this.subVal();
}    

var sub = new subClass();

sub.getSupperVal();   //superValue is true
sub.getsubVal();     //this is subValue
console.log(sub.name);
sub.name.push("java");  //["javascript"]

var sub2 = new subClass();
console.log(sub2.name); //  ["js", "java"]

其中最核心的一句代码是SubClass.prototype = new SuperClass() ;

将原型__proto__ 指向了父类的原型对象。这样子类就可以访问父类的public 和protected 的属性和方法，同时，父类中的private 的属性和方法不会被子类继承。

缺点

敲黑板，如上述代码的最后一段，使用类继承的方法，如果父类的构造函数中有【引用类型】，就会在子类中被所有实例共用，因此一个子类的实例如果更改了这个引用类型，就会影响到其他子类的实例。

构造函数继承

正式因为有了上述的缺点，才有了构造函数继承，构造函数继承的核心思想就是SuperClass.call(this,id),直接改变this的指向，使通过this创建的属性和方法在子类中复制一份，因为是多带带复制的，所以各个实例化的子类互不影响。但是会造成内存浪费的问题

var parentClass = function(name, id) {
  this.name = name;
  this.id = id;
  this.getName = function(){
    console.log(this.name)
  }
}

parentClass.prototype.show = function( ) {
  console.log(this.id)
}

var childClass = function(name, id) {
  parentClass.call(this, name, id); 
}
var subClass = new childClass("zjj", 10);

我们先来总结一下类继承和构造函数继承的优缺点

=	类继承	构造函数继承
核心思想	子类的原型是父类实例化的对象	SuperClass.call(this,id)
优点	子类实例化对象的属性和方法都指向父类的原型	每个实例化的子类互不影响
缺点	子类之间可能会互相影响	内存浪费

GPU云服务器云服务器深入理解webrtc之aec 深入理解javascript 深入理解系列深入理解linux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96827.html

深入理解JavaScript系列8:S.O.L.I.D五大原则之里氏替换原则

摘要：前言本章我们要讲解的是五大原则语言实现的第篇，里氏替换原则。因此，违反了里氏替换原则。与行为有关，而不是继承到现在，我们讨论了和继承上下文在内的里氏替换原则，指示出的面向对象。前言本章我们要讲解的是S.O.L.I.D五大原则JavaScript语言实现的第3篇，里氏替换原则LSP（The Liskov Substitution Principle ）。英文原文：http://fre...

susheng 2019-08-19 17:21 评论0 收藏0
深入理解JavaScript

摘要：深入之继承的多种方式和优缺点深入系列第十五篇，讲解各种继承方式和优缺点。对于解释型语言例如来说，通过词法分析语法分析语法树，就可以开始解释执行了。 JavaScript深入之继承的多种方式和优缺点 JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。写在前面本文讲解JavaScript各种继承方式和优缺点。但是注意：这篇文章更像是笔记，哎，再让我...

myeveryheart 2019-08-22 13:46 评论0 收藏0
深入理解 js 之继承与原型链

摘要：原型链与继承当谈到继承时，只有一种结构对象。如果对该图不怎么理解，不要着急，继续往下看基于原型链的继承对象是动态的属性包指其自己的属性。当使用操作符来作用这个函数时，它就可以被称为构造方法构造函数。原型链与继承当谈到继承时，JavaScript 只有一种结构：对象。每个实例对象（object ）都有一个私有属性（称之为proto）指向它的原型对象（prototype）。该原型对象也...

xingqiba 2019-08-23 13:07 评论0 收藏0
JavaScript深入之从原型到原型链

摘要：深入系列的第一篇，从原型与原型链开始讲起，如果你想知道构造函数的实例的原型，原型的原型，原型的原型的原型是什么，就来看看这篇文章吧。让我们用一张图表示构造函数和实例原型之间的关系在这张图中我们用表示实例原型。 JavaScript深入系列的第一篇，从原型与原型链开始讲起，如果你想知道构造函数的实例的原型，原型的原型，原型的原型的原型是什么，就来看看这篇文章吧。构造函数创建对象我们先...

Songlcy 2019-08-21 15:32 评论0 收藏0
JavaScript之深入各种继承

摘要：通常有这两种继承方式接口继承和实现继承。理解继承的工作是通过调用函数实现的，所以是寄生，将继承工作寄托给别人做，自己只是做增强工作。适用基于某个对象或某些信息来创建对象，而不考虑自定义类型和构造函数。一、继承的概念继承，是面向对象语言的一个重要概念。通常有这两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。《JS高程》里提到：由于函数没有签名，...

tomlingtm 2019-08-23 17:08 评论0 收藏0