草庐IT

class 继承的重点

CTO安东尼 2023-03-28 原文
在 class 出现之前，JavaScript 实现继承是件麻烦事，构造函数继承有加上原型上的函数不能复用的问题；原型链继承又存在引用值属性的修改不独立的问题；组合继承又存在两次调用构造函数的问题，寄生组合继承，写起来又太麻烦了，总之，在 class 出现前，JavaScipt 实现继承真是件麻烦事儿。

然而，class 的出现真的改变这一现状了吗？

不如往下看。

写法

与函数类型相似，定义类也有两种主要方式：类声明和类表达式。

// 类声明 class Person {}

// 类表达式 const Animal = class {};

不过，与函数定义不同的是，虽然函数声明可以提升，但类定义不能。

与函数构造函数一样，多数编程风格都建议类名的首字母要大写，以区别于通过它创建的实例。

类可以包含：

  • 构造函数方法
  • 实例方法
  • 获取函数
  • 设置函数
  • 静态类方法
这些项都是可选的

constructor

class Person {
constructor(name) {
this.name = name
console.log('person ctor');
}
}

let p1 = new Person("p1")
constructor 会告诉解释器 在使用 new 操作符创建类的新实例时，应该调用这个函数。

等同于

function Person(name){
this.name = name
console.log('person ctor')
}

let p1 = new Person("p1")
类构造函数与构造函数的主要区别是，这样写会报错：

class Animal {}

let a = Animal(); // TypeError: class constructor Animal cannot be invoked without 'new'
所以，new 操作符是强制要写的；

使用 new 时，原理与 new 一个对象也是一样的，因为太重要了，再强调一遍：

(1) 在内存中创建一个新对象。(2) 这个新对象内部的[[Prototype]]指针被赋值为构造函数的 prototype 属性。 (3) 构造函数内部的 this 被赋值为这个新对象（即 this 指向新对象）。 (4) 执行构造函数内部的代码（给新对象添加属性）。 (5) 如果构造函数返回非空对象，则返回该对象；否则，返回刚创建的新对象。

特性

从各方面来看，ECMAScript 类就是一种特殊函数。

我们可以用 typeof 打印试试：

class Person {}

console.log(typeof Person); // function
也可以用 instanceof 检查它的原型链

class Person {}

let p = new Person()

console.log(p instanceof Person); // true
通过 class 构造的每个实例都对应一个唯一的成员对象，这意味着所有成员都不会在原型上共享；

class Person {
constructor() {
this.name = new String('Jack');
this.sayName = () => console.log(this.name);
}
}
let p1 = new Person();
let p2 = new Person();

console.log(p1.name === p2.name) // false
console.log(p1.sayName === p2.sayName) // false
如果想要共享，就改写成方法，写在 constructor 外面：

class Person {
constructor() {
this.name = new String('Jack');
}
sayName(){
console.log(this.name);
}
}
let p1 = new Person();
let p2 = new Person();

console.log(p1.sayName === p2.sayName) // true
我们可以在方法前面加 static 关键字，实现：静态类成员。我们不能在类的实例上调用静态方法，只能通过类本身调用。不做赘述。

继承

ECMAScript 6 新增特性中最出色的一个就是原生支持了类继承机制。虽然类继承使用的是新语法，但背后依旧使用的是原型链。

让我们再回顾构造函数继承和原型链继承 2 个经典的问题：

① 构造函数继承的问题：构造函数外在原型上定义方法，不能重用

function SuperType(){}
SuperType.prototype.sayName = ()=>{console.log("bob")}

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

let p1 = new SubType()
console.log(p1.sayName()) // Uncaught TypeError: p1.sayName is not a function
而原型链继承可以解决这一点：

function SuperType(){}
SuperType.prototype.sayName = ()=>{console.log("bob")}

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

let p1 = new SubType()
console.log(p1.sayName()) // bob
② 原型链继承的问题：原型中包含的引用值会在所有实例间共享。

function SuperType(){
this.name = ["bob","tom"];
}

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

let p1 = new SubType()
p1.name.push("jerry")

let p2 = new SubType()
console.log(p2.name) // ['bob', 'tom', 'jerry']
而构造函数继承可以解决这一点：

function SuperType(){
this.name = ["bob","tom"];
}

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

let p1 = new SubType()
p1.name.push("jerry")

let p2 = new SubType()
console.log(p2.name) // ['bob', 'tom']
class 继承有这两个问题吗？？

代码一试便知：

class SuperType{}
SuperType.prototype.sayName = ()=>{console.log("bob")}

class SubType extends SuperType{
}

let p1 = new SubType()
p1.sayName() // bob
问题①，没有问题，在构造函数外写的原型继承，公共方法还是能访问的！！

class SuperType{
constructor(){
this.name=["bob","tom"]
}
}

class SubType extends SuperType{
}

let p1 = new SubType()
let p2 = new SubType()
p1.name.push("Jerry")
console.log(p2.name) // ['bob', 'tom']
问题②，没有问题，在 constructor 的引用值属性，修改不会产生干涉！！

class 继承完美的解决了构造函数继承的问题，和原型链继承的问题，写起来也没有组合继承、寄生继承那么麻烦，如果非得用 JS 模拟面向对象编程，class 必不可少！！

题外话

其实写 Class C 和 C.prototype 一起写是很危险的：明明都在操作面向对象的类了，还要操作原型链。类操作和原型操作是两种不同的设计思路，有兴趣可见本瓜一年前的一篇文章：​​“类”设计模式和“原型”设计模式——“复制”和“委托”的差异​​

OK，以上便是本篇分享。点赞关注评论，为好文助力?

我是掘金安东尼 ? 100 万阅读量人气前端技术博主 ? INFP 写作人格坚持 1000 日更文 ✍ 关注我，陪你一起度过漫长编程岁月 ?

class继承sectionbrcode构造函数原型链赋值JavaScript前端开发yyds干货盘点

有关class 继承的重点的更多相关文章

  1. 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。有没有办法覆盖用于类型

  2. Ruby - 如何处理子类意外覆盖父类(super class)私有(private)字段的问题？ - 2

    假设您编写了一个类Sup，我决定将其扩展为SubSup。我不仅需要了解你发布的接口(interface)，还需要了解你的私有(private)字段。见证这次失败:classSupdefinitialize@privateField="fromsup"enddefgetXreturn@privateFieldendendclassSub问题是，解决这个问题的正确方法是什么？看起来子类应该能够使用它想要的任何字段而不会弄乱父类(superclass)。编辑:equivalentexampleinJava返回"fromSup"，这也是它应该产生的答案。 最佳答案

  3. ruby - 无法理解 `puts{}.class` 和 `puts({}.class)` 之间的区别 - 2

    由于匿名block和散列block看起来大致相同。我正在玩它。我做了一些严肃的观察，如下所示:{}.class#=>Hash好的，这很酷。空block被视为Hash。print{}.class#=>NilClassputs{}.class#=>NilClass为什么上面的代码和NilClass一样，下面的代码又显示了Hash？puts({}.class)#Hash#=>nilprint({}.class)#Hash=>nil谁能帮我理解上面发生了什么？我完全不同意@Lindydancer的观点你如何解释下面几行:print{}.class#NilClassprint[].class#A

  4. ruby - 使用 Class.new 时访问外部范围 - 2

    是否有可能以某种方式访问​​Class.new范围内的a？a=5Class.new{defb;aend}.new.b#NameError:undefinedlocalvariableormethod`a'for#:0x007fa8b15e9af0>#:in`b' 最佳答案 即使@MarekLipka的回答是正确的——改变变量范围总是有风险的。这是可行的，因为每个block都带有创建它的上下文，因此您的局部变量a突然变得不那么局部了——它变成了一个“隐藏的”全局变量:a=5object=Class.new{define_method(

  5. ruby-on-rails - 为什么 DataMapper 使用混合与继承？ - 2

    所以我只是对此感到好奇:DataMapper为其模型使用混合classPostincludeDataMapper::Resource虽然active-record使用继承classPost有谁知道为什么DataMapper选择这样做(或者为什么AR选择不这样做)？ 最佳答案 它允许您从另一个不是DM类的类继承。它还允许动态地将DM功能添加到类中。这是我正在处理的模块中的类方法:defdatamapper_classklass=self.dupklass.send(:include,DataMapper::Resource)klass

  6. Ruby 最佳实践 : working with classes - 2

    参见下面的示例，我想最好使用第二种方法，但第一种也可以。哪种方法最好，使用另一种的后果是什么？classTestdefstartp"started"endtest=Test.newtest.startendclassTest2defstartp"started"endendtest2=Test2.newtest2.start 最佳答案 我肯定会说第二种变体更有意义。第一个不会导致错误，但对象实例化完全过时且毫无意义。外部变量在类的范围内不可见:var="string"classAvar=A.newendputsvar#=>strin

  7. ruby - 模块中的 instance_eval 与 class_eval - 2

    classFooincludeModule.new{class_eval"deflab;puts'm'end"}deflabsuperputs'c'endendFoo.new.lab#=>mc======================================================================classFooincludeModule.new{instance_eval"deflab;puts'm'end"}deflabsuperputs'c'endend注意这里我把class_eval改成了instance_evalFoo.new.labresc

  8. ruby-on-rails - Ruby on Rails 单表继承(STI)和单元测试问题(使用 PostgreSQL) - 2

    我正在使用带有单个“帐户”表的STI模型来保存用户和技术人员的信息(即用户...8)错误:test_the_truth(用户测试):ActiveRecord::StatementInvalid:PGError:ERROR:关系“技术人员”不存在:从“技术人员”中删除...从本质上讲，标准框架不承认Technicians和Users表(或PostgreSQL称它们为“关系”)不存在，事实上，应该别名为Accounts。有什么想法吗？我对RoR比较陌生，不知道如何解决这个问题而又不完全删除STI。 最佳答案 原来问题是由于存在:./te

  9. ruby-on-rails - Rails - 父类(super class)不匹配 - 2

    玩转Rails和Controller继承。我创建了一个名为AdminController的Controller，其中一个名为admin_user_controller的子类位于/app/controllers/admin/admin_user_controller.rb这是我的routes.rbnamespace:admindoresources:admin_user#Havetheadminmanagethemhere.endapp/controllers/admin/admin_user_controller.rbclassAdminUserController应用程序/Contr

  10. ruby-on-rails - ApplicationController :Class 的未定义方法 `caches_action' - 2

    我正在尝试升级到Rails4beta1，但遇到了一些问题。简而言之，这就是我的应用程序Controller的样子。classApplicationControllercaches_action在Rails4中移到了它自己的gem中，因此包含gem应该可以解决问题。gem"actionpack-action_caching",github:"rails/actionpack-action_caching"但是当我运行我的请求规范或在浏览器中访问该应用程序时，我收到此错误。app/controllers/application_controller.rb:3:in`':undefinedm

随机推荐