扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中六种面试常考继承方式总结
  • 663

0
分享到

JavaScript中六种面试常考继承方式总结

JavaScript继承方式JavaScript继承 2023-02-13 12:02:40 663人浏览 薄情痞子
摘要

目录原型链继承盗用构造函数组合继承原型式继承寄生式继承寄生式组合继承js的几种继承方式在我们面试的时候经常会被问到，所以深入理解js几种继承方式以及它们的优缺点是非常有必要的。 原型

js的几种继承方式在我们面试的时候经常会被问到，所以深入理解js几种继承方式以及它们的优缺点是非常有必要的。

原型链继承

之前我们介绍过原型和实例的关系：每一个构造函数都有一个原型prototype，原型对象中的constructor又指回构造函数,实例中有一个内部指针__proto__指向构造函数的prototype。不清楚的可以看这篇 下面看个代码

function Parent() {
  this.name = "mick";
}

Parent.prototype.getName = function () {
  console.log(this.name);
};

function Child() {}

Child.prototype = new Parent();

var child1 = new Child();

console.log(child1.getName());

我们将构造函数Parent的实例赋值给了构造函数Child的原型，实现了Child能够继承Parent的属性和方法。

优点

1.父类的方法可以被复用

缺点

1.父类的所有属性都会被子类共享，只要修改了一个子类的引用类型的属性，其他的子类也会受影响

function Parent() {
  this.names = ["mick", "randy"];
}

function Child() {}

Child.prototype = new Parent();

var child1 = new Child();

child1.names.push("qr");

console.log(child1.names); // ["mick", "randy", "qr"]

var child2 = new Child();

console.log(child2.names); //  ["mick", "randy", "qr"]

2.子类实例不能给父类构造函数传参

盗用构造函数

盗用构造函数的思路其实就是在子类构造函数中通过call或者apply方法调用父类构造函数

function Parent() {
  this.names = ["mick", "randy"];
}

function Child() {
  Parent.call(this);
}

var child1 = new Child();

child1.names.push("qr");

console.log(child1.names); // ["mick", "randy", "qr"]

var child2 = new Child();

console.log(child2.names); //  ["mick", "randy"]

这里我们通过在构造函数Child中通过call调用Parent,此时this就是构造函数Child,其实就是Child的实例被创建的时候都会对Parent进行初始化，相当于每一个实例都拥有了names属性。

我们也可以给父构造函数传参了

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

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

var child1 = new Child("randy", 18);

console.log(child1.name); // randy

优点

  • 可以在子类构造函数向父类构造函数传参
  • 父类的实例的引用属性不会被共享

缺点

子类不能访问父类原型上的方法，所以所有方法和属性都写在构造函数中，每次实例创建都会被初始化。

组合继承

组合继承就是综合原型链继承和盗用构造函数继承的优点，从何又对这两种方法的缺点互补。使用原型链继承可以访问父类原型上的属性和方法，通过构造函数继承可以访父类实例的属性和方法。

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

Parent.prototype.getName = function () {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name); // 第一次
  this.age = age;
}

Child.prototype = new Parent(); // 第二次
Child.prototype.constructor = Child;

var child1 = new Child("mick", "18");

child1.colors.push("black");

console.log(child1.name); // mick
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "black"]

var child2 = new Child("randy", "20");

console.log(child2.name); // randy
console.log(child2.age); // 20
console.log(child2.colors); // ["red", "blue", "green"]

优点

  • 父类的方法可以复用
  • 可以在子类构造函数向父类传参
  • 父类构造函数中的引用属性不会共享

缺点

父类构造函数被调用了两次（文章中的注释已经标出）

原型式继承

创建一个临时的构造函数，将传入的对象赋值给这个构造函数的原型，然后返回这个临时类型的一个实例。其实就是对传入对应进行一次浅复制。

function createObj(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

其实就是Object.create的模拟实现，将传入的对象作为创建的对象的原型 缺点

1.引用类型的属性值始终都会共享相应的值，这点跟原型链继承一样

function createObj(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

let person = {
  name: "mick",
  colors: ["red", "blue", "green"],
};

let anotherPerson = createObj(person);
anotherPerson.name = "randy";
anotherPerson.colors.push("black");
console.log(anotherPerson.colors); // ['red', 'blue', 'green', 'black']
let yetAnotherPerson = createObj(person);

yetAnotherPerson.colors.push("yellow");
console.log(yetAnotherPerson.name); // mick
console.log(yetAnotherPerson.colors); // ['red', 'blue', 'green', 'black', 'yellow']

修改了anotherPerson.name的值，yetAnotherPerson.name没有发生变化，这是因为anotherPerson.name给anotherPerson添加了name的值，并不是修改了原型上的值。

寄生式继承

寄生式继承背后类似于寄生构造函数和工厂模式：创建一个实现继承的函数，以某种方式增强对象，然后返回这个对象。我们继续使用原型式继承创建的方法

function createObj(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

function createAnother(original) {
  let clone = createObj(original);
  clone.sayHi = function () {
    console.log("hi");
  };
  return clone;
}

缺点

跟盗用构造函数一样的，方法在每次创建对象都会重新创建一遍

寄生式组合继承

我们首先回看下组合继承有个缺点就是父类构造函数会调用两次，那如何优化这个缺点呢？

寄生式组合继承通过盗用构造函数继承属性，但使用混合式原型链继承方法。基本思路是不通过调用父类构造函数给子类原型赋值，而是取得父类原型的一个副本。也就是使用寄生式继承来继承父类原型，然后将返回的新对象赋值给子类原型

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

Parent.prototype.getName = function () {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

var F = function () {};
F.prototype = Parent.prototype;
Child.prototype = new F();

var child1 = new Child("mick", "18");

console.log(child1);

封装一下

function createObj(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

function prototype(child, Parent) {
  var prototype = createObj(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}
function Parent(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

Parent.prototype.getName = function () {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

prototype(Child, Parent)

var child1 = new Child("mick", "18");

console.log(child1);

这种方式的高效率体现它只调用了一次Parent构造函数，并且因此避免了在Parent.prototype上面创建不必要的、多余的属性。与此同时，原型链还能保持不变；因此，还能够正常使用instanceof和isPrototypeOf。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

以上就是javascript中六种面试常考继承方式总结的详细内容，更多关于JavaScript继承方式的资料请关注编程网其它相关文章！

--结束END--

本文标题: JavaScript中六种面试常考继承方式总结

本文链接: https://lsjlt.com/news/195758.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript中六种面试常考继承方式总结
    目录原型链继承盗用构造函数组合继承原型式继承寄生式继承寄生式组合继承js的几种继承方式在我们面试的时候经常会被问到，所以深入理解js几种继承方式以及它们的优缺点是非常有必要的。 原型...
    99+
    2023-02-13
    JavaScript继承方式 JavaScript继承
  • JavaScript实现继承的6种常用方式总结
    目录1.原型链继承2.借用构造函数继承3.组合继承（经典继承）4.原型式继承方法一：借用构造函数方法二：Object.create()5.寄生式继承6.寄生组合式继承7.ES6、Cl...
    99+
    2024-04-02
  • js中常见的6种继承方式总结
    目录前言1、原型继承2、盗用构造函数3、组合继承4、原型式继承5、寄生式继承6、寄生式组合继承总结前言 js是门灵活的语言，实现一种功能往往有多种做法,ECMAScript没有明确的...
    99+
    2024-04-02
  • JS中的六种继承方式以及优缺点总结
    目录前言原型链继承 构造函数继承 组合继承（原型链继承和构造函数继承组合） 寄生式继承 组合寄生式继承 extends继承 总结前言 继承是JS世界中必不可少的一个环节，号称JS的三...
    99+
    2024-04-02
  • JavaScript实现继承的7种方式总结
    目录什么是继承实现继承的6种方式1. 原型链继承2. 构造函数继承3. 组合继承(伪经典继承)4. 原型式继承5. 寄生式继承6.寄生组合式继承7.class 类继承什么是继承 用官...
    99+
    2023-05-14
    JavaScript实现继承方式 JavaScript继承方式 JavaScript继承
  • JavaScript中的常见继承总结
    目录前言原型链常用的继承方法原型继承原理优点缺点执行结果借用构造函数继承原理优点缺点执行结果组合继承原理优点缺点执行结果前言 我们在学习前端的过程中一定会遇到继承这个问题 继承其实就...
    99+
    2024-04-02
  • JavaScript中常见的几种继承方式
    目录原型继承内存图分析盗用构造函数继承分析组合继承原型链继承寄生式继承寄生组合式继承原型继承 function Parent(name) { this.name = name }...
    99+
    2024-04-02
  • 好程序员分享JavaScript六种继承方式详解
    好程序员分享JavaScript六种继承方式详解，继承是面向对象编程中又一非常重要的概念，JavaScript支持实现继承，不支持接口继承，实现继承主要依靠原型链来实现的 原型链 首先得要明白什么是原型链，在一篇文章看懂...
    99+
    2023-06-03
  • 分享JavaScript 中的几种继承方式
    目录一、原型链1.1 原型链的问题二、盗用构造函数2.1 基本思想2.2 可向父类构造函数传参2.3 盗用构造函数的问题三、组合继承（伪经典继承）3.1 基本思想3.2 组合继承的问...
    99+
    2024-04-02
  • uni-app常用的几种页面跳转方式总结
    目录一、uni.navigateTo(OBJECT)二、uni.navigateBack(OBJECT)三、uni.redirectTo(OBJECT)四、uni.switchTab...
    99+
    2024-04-02
  • JavaScript中常用的几种字符串方法总结
    本篇内容介绍了“JavaScript中常用的几种字符串方法总结”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！JavaScript可以做什么1...
    99+
    2023-06-14
  • Mysql中常用的几种join连接方式总结
    目录1.内连接2.左连接3.右连接4.查询左表独有数据5.查询右表独有数据6.全连接7.查询左右表各自的独有的数据总结1.首先准备两张表 部门表： 员工表： 以下我们就对这两张表...
    99+
    2024-04-02
  • C#中后台post请求常用的两种方式总结
    目录1.application/x-www-form-urlencoded2.mutipart/form-data最近对接接口的时候，需要根据对方的请求数据类型来进行传值，常用的就是...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作