记录--JS精粹，原型链继承和构造函数继承的 “毛病”

林恒 2023-03-28 原文

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

先从面向对象讲起，本瓜认为：面向对象编程，它的最大能力就是：复用！

咱常说，面向对象三大特点，封装、继承、多态。

这三个特点，以“继承”为核心。封装成类，是为了继承，继承之后再各自发展（重写），可理解为多态。所以，根本目的是为了继承，即“复用“！

如果你用 JavaScript 面向对象的能力来编程的话，能想到的，也只供使用的就是：基于原型。

因为这门语言设计就是这样，我们之前也提过：JavaScript的语言设计主要受到了Self（一种基于原型的编程语言）和 Scheme（一门函数式编程语言）的影响；

它复用的能力就是来自原型！

好了，有这个认知基础，我们再看原型继承。

原型链继承

原型继承最直接的一种实现就是：原型链继承

ECMA-262 把原型链定义为 ECMAScript 的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。

我们来看看原型链继承的代码实现：

function SuperType() {
	 this.property = true;
}
function SubType() {
	 this.subproperty = false;
}

SuperType.prototype.getSuperValue = function() {
 return this.property;
};
SubType.prototype.getSubValue = function () {
 return this.subproperty;
};

SubType.prototype = new SuperType(); // 对 SubType 得原型链重新指定，是原型链继承
let instance = new SubType();

console.log(instance.getSuperValue()); // true

还需要再额外说明查找关系吗？？不懂得工友可见这篇《歪理解？原型链中的函数和对象》

这里还是用代码展示下它们的指向关系吧：

上面例子中有 1 个对象 instance ，两个函数，SuperType 和 SubType 。函数是上帝，对象是基本物质。继承来自两方面：1. 继承自祖先（遗产）；2. 继承自上帝（天赋）；

//  继承自祖先（遗产）

instance.__proto__ === SubType.prototype // true

SubType.prototype.__proto__ === SuperType.prototype // true

// 继承自上帝（天赋）

SuperType.__proto__  === Function.prototype // true

SubType.__proto__  === Function.prototype // true

SuperType.prototype.__proto__ === Object.prototype // true

Object.prototype.__proto__ === null // true

当然，我们并不是来讲原型链的。重点是：点出原型链继承的“问题”！！

它的主要问题出现在：原型中包含引用值的时候，原型中包含的引用值会在所有实例间共享。

function SuperType() {
 this.colors = ["red", "blue", "green"];
}

function SubType() {}

SubType.prototype = new SuperType() // 原型链继承

let s1 = new SubType()
let s2 = new SubType()
s1.colors.push("yellow")

console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green', 'yellow']

colors 是个数组，引用值，当它共享给 SubType 的时候，用的是引用值，当我们实例化的时候，如果其中一个实力对它做出了修改，将会影响到其它实例的引用。

其实，我们也知道，很少在业务代码中这样去写继承：SubType.prototype = new SuperType() ，原型链继承会造成复用的混乱，所以它基本不会被单独使用。

构造函数继承

构造函数继承，也叫做：“盗用构造函数”，“对象伪装”或“经典继承”。

基本思路：在子类构造函数中用 apply()和 call()方法调用父类构造函数。

上一小节的例子改造为：

function SuperType() {
 this.colors = ["red", "blue", "green"];
}

function SubType() {
	SuperType.call(this) // 构造函数继承
}

let s1 = new SubType()
let s2 = new SubType()
s1.colors.push("yellow")

console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']

完美解决原型链继承的问题，但是它也有它的问题，也是使用构造函数模式自定义类型的问题，

即：必须在构造函数中定义方法（在原型上定义方法，子类是访问不到的），函数不能重用。

function SuperType() {
}

function SubType() {
	SuperType.call(this) // 构造函数继承
}

SuperType.prototype.fn = ()=>{}

let s1 = new SubType()

console.log(s1.fn) // undefined

function SuperType() {
	 this.fn=()=>{}
}

function SubType() {
	SuperType.call(this) // 构造函数继承
}

let s1 = new SubType()
let s2 = new SubType()

console.log(s1.fn === s2.fn) // false

而这一点，在原型链继承中，又是可以的。。。

function SuperType() {}
function SubType() {}

SuperType.prototype.fn = ()=>{}
SubType.prototype = new SuperType() // 原型链继承

let s1 = new SubType()
console.log(s1.fn) // ()=>{}

function SuperType() {
	 this.fn=()=>{}
}
function SubType() {}

SubType.prototype = new SuperType() // 原型链继承

let s1 = new SubType()
let s2 = new SubType()

console.log(s1.fn === s2.fn) // true

所以，综上，原型链继承和构造函数继承的 “毛病” 分别是：

原型链继承：所有继承的属性和方法都会在对象实例间共享，无法做到实例私有。
构造函数继承：子类不能访问父类原型上的方法。

咱就是说，这东西怎么这么拧巴呢。。。

于是乎一个规避二者“毛病”的继承方式出现了：组合继承~~

组合继承

目前最流行的继承模式是组合继承！

思路是：使用原型链继承原型上的属性和方法，而通过构造函数继承实例属性。

function SuperType(name){
	 this.name = name;
	 this.colors = ["red", "blue", "green"];
}

function SubType(name, age){
	 SuperType.call(this, name) // 构造函数继承
	 this.age = age;
}

SuperType.prototype.sayName = function() {
	 console.log(this.name);
}
SubType.prototype = new SuperType() // 原型链继承

SubType.prototype.sayAge = function() {
	 console.log(this.age);
}

let s1 = new SubType("Nicholas", 29)
let s2= new SubType("Greg", 27)

s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']

s1.sayName() // Nicholas
s2.sayName() // Greg

s1.sayAge() // 29
s2.sayAge() // 27

组合继承，总结起来就是，属性（特别是引用值）通过构造函数去继承，而公用的、需要复用的方法用原型链去继承！！

说实话，JS 继承真的很奇怪。。。并不是面向对象语言，又要通过原型链去模拟面向对象，真的很多小坑的点需要去注意。(哈哈哈，想想还是函数式好，清晰)

本文转载于:

https://juejin.cn/post/7107779239281164301

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

精粹毛病 SubType SuperType prototype JavaScript

有关记录--JS精粹，原型链继承和构造函数继承的 “毛病”的更多相关文章

ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2
我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re
ruby - Sinatra:运行 rspec 测试时记录噪音 - 2
Sinatra新手；我正在运行一些rspec测试，但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音？我仔细检查了环境是否设置为:test，这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/
ruby-on-rails - 在 ruby 中使用 gsub 函数替换单词 - 2
我正在尝试用ruby中的gsub函数替换字符串中的某些单词，但有时效果很好，在某些情况下会出现此错误？这种格式有什么问题吗NoMethodError(undefinedmethod`gsub!'fornil:NilClass):模型.rbclassTest"replacethisID1",WAY=>"replacethisID2andID3",DELTA=>"replacethisID4"}end另一个模型.rbclassCheck 最佳答案啊，我找到了!gsub!是一个非常奇怪的方法。首先，它替换了字符串，所以它实际上修改了
ruby - 在 Ruby 中有条件地定义函数 - 2
我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin
ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2
我有两个Rails模型，即Invoice和Invoice_details。一个Invoice_details属于Invoice，一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa
ruby - 在 Ruby 中按名称传递函数 - 2
如何在Ruby中按名称传递函数？(我使用Ruby才几个小时，所以我还在想办法。)nums=[1,2,3,4]#Thisworks,butismoreverbosethanI'dlikenums.eachdo|i|putsiend#InJS,Icouldjustdosomethinglike:#nums.forEach(console.log)#InF#,itwouldbesomethinglike:#List.iternums(printf"%A")#InRuby,IwishIcoulddosomethinglike:nums.eachputs在Ruby中能不能做到类似的简洁？我可以只
ruby-on-rails - Rails 单表继承 : How to override the value written to the type field - 2
在我的系统中，我已经定义了STI。Dog继承自Animal，在animals表中有一个type列，其值为"Dog"。现在我想让SpecialDog继承自dog，只是为了在某些特殊情况下稍微修改一下行为。数据还是一样。我需要通过SpecialDog运行的所有查询，以返回数据库中类型为Dog的值。我的问题是因为我有一个type列，rails将WHERE"animals"."type"IN('SpecialDog')附加到我的查询中，所以我不能获取原始的Dog条目。所以我想要的是以某种方式覆盖rails在通过SpecialDog访问数据库时使用的值，使其表现得像Dog。有没有办法覆盖用于类型
C51单片机——实现用独立按键控制LED亮灭（调用函数篇） - 2
说在前面这部分我本来是合为一篇来写的，因为目的是一样的，都是通过独立按键来控制LED闪灭本质上是起到开关的作用，即调用函数和中断函数。但是写一篇太累了，我还是决定分为两篇写，这篇是调用函数篇。在本篇中你主要看到这些东西！！！1.调用函数的方法（主要讲语法和格式）2.独立按键如何控制LED亮灭3.程序中的一些细节（软件消抖等）1.调用函数的方法思路还是比较清晰地，就是通过按下按键来控制LED闪灭，即每按下一次，LED取反一次。重要的是，把按键与LED联系在一起。我打算用K1来作为开关，看了一下开发板原理图，K1连接的是单片机的P31口，当按下K1时，P31是与GND相连的，也就是说，当我按下去时
ruby-on-rails - 事件记录 : Select max of limit - 2
我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。最佳答案从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).
ruby-on-rails - 将字符串转换为 ruby-on-rails 中的函数 - 2
我需要一个通过输入字符串进行计算的方法，像这样function="(a/b)*100"a=25b=50function.something>>50有什么方法吗？最佳答案您可以使用instance_eval:function="(a/b)*100"a=25.0b=50instance_evalfunction#=>50.0请注意，使用eval本质上是不安全的，尤其是当您使用外部输入时，因为它可能包含注入(inject)的恶意代码。另请注意，a设置为25.0而不是25，因为如果它是整数a/b将导致0(整数)。