开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

JS中的继承:this.base = Class(); this.base()还是......？

在JavaScript中，继承是一种实现代码重用的方法，可以在一个类中使用另一个类的属性和方法。在这个问答内容中，我们将介绍两种常见的实现继承的方法：原型链继承和构造函数继承。

原型链继承：

原型链继承是通过将子类的原型对象指向父类的一个实例对象，从而实现继承的。具体实现如下：

function Parent() {
  this.name = 'parent';
}

Parent.prototype.sayHello = function() {
  console.log('Hello, ' + this.name);
};

function Child() {
  this.name = 'child';
}

Child.prototype = new Parent();

const child = new Child();
child.sayHello(); // 输出：Hello, child

构造函数继承：

构造函数继承是通过在子类的构造函数中调用父类的构造函数，从而实现继承的。具体实现如下：

function Parent() {
  this.name = 'parent';
}

Parent.prototype.sayHello = function() {
  console.log('Hello, ' + this.name);
};

function Child() {
  Parent.call(this); // 调用父类构造函数
  this.name = 'child';
}

const child = new Child();
child.sayHello(); // 输出：Hello, child

需要注意的是，以上两种方法都存在一定的缺陷，例如在原型链继承中，子类实例对象的属性会被所有实例共享，而构造函数继承则需要在子类构造函数中调用父类构造函数，可能会导致一些问题。因此，在实际开发中，通常会使用其他方法来实现继承，例如组合、Mixin等。

推荐的腾讯云相关产品：

腾讯云云服务器：提供可靠的云计算服务，满足各种应用场景的需求。
腾讯云数据库：提供多种数据库服务，包括关系型数据库、非关系型数据库等。
腾讯云API网关：提供安全、稳定、高可用的API接入服务，支持API的创建、发布、监控、管理等功能。
腾讯云云储存：提供可靠的云存储服务，支持对象、块、文件等存储方式。

产品介绍链接地址：

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js中class的继承的基础用法

在es6中class可通过关键词extends来实现继承，es5则是修改原型链来实现继承的。...，注意看子类中fn1这个函数，他使用了父类的sky属性，注意在子类使用父类的属性时，只能使用this来调用，使用super是找不到的，因为class中的属性都是实例属性。...es5中的继承 es5中的继承则是让某个构造函数的原型对象等于另一个类型的实例，这样实现的继承。...();//使用父类的方法相信大家都可以看懂，es5的继承就让子类的prototype等于父类的实例，即可完成继承。...相比之下，es6的继承肯定更清晰，而且更方便，不过es6的继承也是通过原型来操作的，只是给我们封装了。如无作者授权，请勿转载。

4.3K1 0

(必考)js中关于类（class）的继承的说法

考核内容: Class 的继承题发散度: ★★ 试题难度: ★★ 解题思路: Class 表达式 ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。...通过class关键字，可以定义类与函数一样，类也可以使用表达式的形式定义。 ? 上面代码使用表达式定义了一个类。...需要注意的是，这个类的名字是Person，但是Person只在 Class 的内部可用，指代当前类。在 Class 外部，这个类只能用MyClass引用。...类的内部所有定义的方法，都是不可枚举的（non-enumerable）类的属性名，可以采用表达式。...类的构造函数，不使用new是没法调用的，会报错。 Class不存在变量提升

2.3K2 0

悟透JavaScript

并通过在JavaScript模拟类和继承的概念，讲解了这些概念；第二部分“手谈JavaScript”主要讲解了DOM，并实现了一个围棋的范例；第三部分“点化AJax” 主要讲述了Ajax的实现，以及跨域进行...下面摘录了书中的一些要点。 JavaScript真经甘露模型：这个模型主要是将JavaScript的类定义、继承，模拟成C#的语言的形势，看上去显得更加优雅一些。...this.base; // 删除覆写的base属性 } function MakeBase(Type) { var Base = Type.Base...Base.apply(this, arguments); } } } // 定义类 function Class(){ var aDefine = arguments[...aType.prototype.Type = aType; // 为此类对象扩展一个Type属性 return aType; } // 使用示例 var Person = Class

4124 0

Vue.js 的九个性能优化技巧

本文主要还是针对 Vue.js 2.x 版本，毕竟接下来一段时间，Vue.js 2.x 还是我们工作中的主流版本。...))) + this.base * this.base + this.base + this.base * 2 + this.base * 3 } return result...这里主要是优化前后的组件的计算属性 result 的实现差异，优化前的组件多次在计算过程中访问 this.base，而优化后的组件会在计算前先用局部变量 base，缓存 this.base，后面直接访问...那么为啥这个差异会造成性能上的差异呢，原因是你每次访问 this.base 的时候，由于 this.base 是一个响应式对象，所以会触发它的 getter，进而会执行依赖收集相关逻辑代码。...数据量越大，这种优化的效果就会更明显。其实类似这种优化的方式还有很多，比如我们在组件中定义的一些数据，也不一定都要在 data 中定义。

1.1K2 0

js 中的class

js 的class 由于存在转换器这种神器，所以代码能直接转换为es5，用es6的语法写。一些解释 js的class仅仅为一个语法糖，是在原先构造函数的基础上出现的class，仅仅如此。...所以使用构造函数构造类，或者使用class语法糖构造类都是相同的。具体还是使用prototype和this来进行模拟类。重点在于构造函数，使用的是构造函数来模拟类。...this.width = width; } } 在类表达式中，同样会出现类声明提升的问题。...extends 使用extends创建子类 class Animal { constructor(name) { this.name = name; } speak() { // 由于是在类中定义...(this.name); } } let d = new Dog(); d.name = "ming" d.speak(); 类不可继承没有构造函数的对象如果一个对象没有构造函数，将不能进行继承。

11.2K1 0

JavaScript面试卷（二） -- 复杂的创建对象模型

如果想在JavaScript 中为继承的属性指定初始值，需要在构造器函数中添加更多的代码。...下面是Engineer 构造器的重新定义： function Engineer (name, projs, mach) { this.base = WorkerBee; this.base(name...可以认为，在 Engineer 的构造器中调用了 WorkerBee 的构造器，也就为 Engineer 对象设置好了继承关系。事实并非如此。...修改所有后代的某属性值如果想在运行时修改一个对象的属性值并且希望该值被所有该对象的后代所继承，您就不能在该对象的构造器函数中定义该属性。而应该将该属性添加到该对象所关联的原型中。...例如： var f = new Foo(); var isTrue = (f instanceof Foo); 作为详细一点的例子，假定我们使用和在继承属性中相同的一组定义。

6042 0

js中的继承

方式一：原型链继承特点：实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！）...：可以向父类构造函数传参缺点：不能继承父类构造函数的原型function Parent(name) {this.name = name}function Child() {Parent.call(this...：原型链继承+构造函数继承function Parent(name) {this.name = name}function Child(name) {Parent.call(this, name)this.age...Parent()const c = new Child('lisi');console.log(c) // Parent { name: 'lisi', age: 20 }方式四：通过 extends 关键字class...Parent {name = 'zs'}class Child extends Parent {age = 20}const c = new Child();console.log(c) // Child

1.1K0 0

Vue路由History模式分析

，而在createMatcher中又调用了实际用以创建路由映射表的方法createRouteMap，可以说createMatcher函数的作用就是创建路由映射表，然后通过闭包的方式让addRoutes和...HTML5History对象就是对于history模式下的路由的处理，主要是通过继承History对象以及自身实现的方法完成路由。...，这是因为需要避免在某些浏览器中调度第一个popstate事件，但是由于异步保护，第一个历史记录路由未同时更新的问题。...// dev/src/index.js line 21 export default class VueRouter { //......_route = route }) }) } //... } // dev/src/history/base.js line 24 export class History

1.2K0 0

从Vue-router到html5的pushState

最近在用vue的时候突然想到一个问题首先，我们知道vue实现的单页应用中一般不会去刷新页面，因为刷新之后页面中的vuex数据就不见了。...去翻了一下vue-router的源码，找到这样一段 export class HTML5History extends History { ......这个state可以在history或者popstate的事件中看到 history中的 ? popstate中的 ?...at History.pushState (https://aixuedaiimg.oss-cn-hangzhou.aliyuncs.com/static/m/js/alog/v1.0.0/alog.min.js...同时根据router前往的路由获取对应的js资源文件并挂载到目标dom上实现页面内容的更新，但是页面本身并没有刷新。

3.1K5 0

JS中Class类的详解

大家好，又见面了，我是你们的朋友全栈君。概述在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。...严格模式类和模块的内部，默认就是严格模式，所以不需要使用 use strict 指定运行模式类的声明定义一个类的一种方法是使用一个类声明，即用带有class关键字的类名（这里是“Rectangle...toString() { console.log(this.x + ', ' + this.y) } } 注意：在类中声明方法的时候，方法前不加 function 关键字...方法之间不要用逗号分隔，否则会报错类的内部所有定义的方法，都是不可枚举的（non-enumerable）一个类中只能拥有一个 constructor 方法静态方法静态方法可以通过类名调用...prototype 属性上面，在类的实例上面调用方法，其实就是调用原型上的方法原型方法可以通过实例对象调用，但不能通过类名调用，会报错 class Person { constructor

4.4K1 0

我在项目中用实际用到的22个Vue优化技巧

优化前 ...result 的实现差异，优化前的组件多次在计算过程中访问 this.base，而优化后的组件会在计算前先用局部变量 base，缓存 this.base，后面直接访问 base。...那么为啥这个差异会造成性能上的差异呢，原因是你每次访问 this.base 的时候，由于 this.base 是一个响应式对象，所以会触发它的 getter，进而会执行依赖收集相关逻辑代码。...所以推荐loading相关的css或者js代码最好是内联到html中的头部，这样即可保证展示loading时对应的css和js已经加载完成。

7802 0

深入理解JavaScript系列（29）：设计模式之装饰者模式

装饰者提供比继承更有弹性的替代方案。装饰者用用于包装同接口的对象，不仅允许你向方法添加行为，而且还可以将方法设置成原始对象调用（例如装饰者的构造函数）。...装饰者用于通过重载方法的形式添加新功能，该模式可以在被装饰者前面或者后面加上自己的行为以达到特定的目的。正文那么装饰者模式有什么好处呢？前面说了，装饰者是一种实现继承的替代方案。...当脚本运行时，在子类中增加行为会影响原有类所有的实例，而装饰者却不然。取而代之的是它能给不同对象各自添加新行为。...function () { decorated.performTask(); }; } function ConcreteDecoratorClass(decorated) { this.base...= AbstractDecorator; this.base(decorated); decorated.preTask = function () { console.log

3980 0

从vue-router源码中看前端路由的两种实现

一般插件对外暴露的类都是定义在源码src根目录下的index.js文件中，打开该文件，可以看到VueRouter类的定义，摘录与mode参数有关的部分如下： export default class VueRouter...他们都定义在src/history文件夹下，继承自同目录下base.js文件中定义的History类。...，应该是在插件加载的地方，即VueRouter的install()方法中混合入Vue对象的，查看install.js源码，有如下一段： export function install (Vue) {...通常情况，无论是开发还是线上，前端项目都是通过服务器访问，不存在 "Opening index.html over file://" ，但程序员都知道，需求和场景永远是千奇百怪的，只有你想不到的，没有产品经理想不到的...再看hash模式，在HashHistory中： export class HashHistory extends History { constructor (router: Router, base

1.7K3 0

Vue路由实现原理

H5中的History对象的属性（部分）属性描述 length 历史记录数组的长度 state 表示当前的处在哪个记录上 H5中的History对象的方法（部分）方法描述 back() 等效于用户点击回退按钮..._route = route }) }) } app为Vue组件实例，但是Vue作为渐进式的前端框架，本身的组件定义中应该是没有有关路由内置属性_route,如果组件中要有这个属性，应该是在插件加载的地方...，即VueRouter的install()方法中混入Vue对象的，install.js的源码： export function install (Vue) { Vue.mixin({.../base.js'; export class HashRouter extends BaseRouter { constructor(list) { super(list);.../base.js'; export class HistoryRouter extends BaseRouter { constructor(list) { super(list);

1.2K3 0

JS箭头函数之：为何用？怎么用？何时用？

在现代JS中最让人期待的特性就是关于箭头函数，用=>来标识。...而箭头函数并没有它自己的执行上下，实际上，这就意味着代码中的this和arguments都是继承它的父函数。...这是箭头函数的理想位置，特别是如果您生成的函数是有状态的，同时想引用对象中的某些内容。...例如在Vue.js中，有一种通用模式，就是使用mapState将Vuex存储的各个部分，直接包含到Vue组件中。...1 : x*fact(x-1) ); fact(5); // 120 总结箭头函数是JS语言中十分特别的属性，并且使很多情形中代码更加的变化莫测。

3.9K1 0

前端测试题:(解析)js中关于类（class）的继承的说法，下面错误的是？

考核内容: Class 的继承题发散度: ★★ 试题难度: ★★ 解题思路: Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。...class Father {} class Child extends Father {} 上面代码定义了一个Father类，该类通过extends关键字，继承Father类的所有属性和方法。...子类必须在constructor方法中调用super方法，否则新建实例时会报错。...第一种情况，super作为函数调用时，代表父类的构造函数 class A {} class B extends A { constructor() { super(); } } 上面代码中...class A {} class B extends A { m() { super(); // 报错 } } 第二种情况，super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中

9192 0

Js中类的定义和继承

new per.talk = function () { console.log("我是静态方法") } // 调用静态方法 per.talk() // 通过原型链拓展属性和方法 // 原型链上的属性会被多个实例共享...Person.prototype.sex = "男" Person.prototype.work = function () { console.log(this.name + "在工作") } per.work() 类的继承...对象冒充继承 // 对象冒充继承 function Woman() { //对象冒充可以继承函数的属性和方法，无法继承原型链上的 Person.call(this) } var wom...= new Woman() wom.run() //父类函数里的方法原型链继承 // 原型链继承 function Man() {} // 原型链可以继承函数和原型链上的属性和方法 Man.prototype...= new Person() var man = new Man() man.run() //父类函数里的方法 man.work() //父类原型链里的方法子类给父类传参对象冒充+原型链 function

2.3K4 0

原生JS中的拖拽方法继承

给大家分享一个用原生JS编写的拖拽及拖拽方法继承的小Demo，代码如下。原生JS...中的拖拽方法继承 #div1 { width: 100px; height: 100px;...function LimitDrag(id) { // 调用父级对象 Drag.call(this, id); }; // 继承父级对象的原型...new Drag('div1'); // div2在拖动过程中通过将方法改写加上边界限制 new LimitDrag('div2

5K2 0

ES6中的Class回顾总结二：继承

接昨天继续以class类作为学习对象，回顾面向对象开发有三要素。继承，子类继承父类封装，数据的权限和保密多态，同一接口不同实现今天先复习下继承相关。...class可以通过extends关键字来实现子类继承父类。...方法和showScore方法中，都用到了super关键字，它表示的是父类的构造函数，用来新建父类的this对象，注意，super虽然代表了父类的构造函数，但是返回的是子类的实例，即super内部的this...子类必须在constructor方法中调用super方法，否则新建实例时报错。...父类的静态方法也会被子类所继承。这里有个地方需要注意下，在子类的constructor构造函数中，必须先调用super方法，才能使用this，否则就会报错。

3903 0

设计模式——结构性设计模式

(); } } 对象适配器将需要转变的类实例化，并用作与适配器类的构造方法因为类适配器会占用一个继承位，而java又是单继承的。...比如我们的文件夹，一个文件夹中可以有很多个子文件夹或是文件。...//装饰者需要将装饰目标组合到类中 protected Base base; public Decorator(Base base) { this.base = base...，在被装饰之后你能够在被增强的类上使用增强后的功能，增强后你还是你，只不过被强化了而已；代理模式强调要让别人帮你去做事情，以及添加一些本身与你业务没有太多关系的事情（记录日志、设置缓存等）重点在于让别人帮你做...//代理者需要将代理目标组合到类中 protected Base base; public Decorator(Base base) { this.base = base

1531 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭