15分钟深入了解JS继承分类、原理与用法

下面是关于“15分钟深入了解JS继承分类、原理与用法”的完整攻略。

一、JS继承分类

JS继承可以分为以下几种类型:

  1. 原型链继承
  2. 借用构造函数继承
  3. 组合继承
  4. 原型式继承
  5. 寄生式继承
  6. 寄生组合式继承

二、JS继承原理

JS中的继承是基于原型的,每个对象都有__proto__属性,该属性指向对象的原型对象,原型对象又有__proto__属性,依次形成了一个原型链。当我们访问一个对象的属性时,如果该对象本身没有该属性,就会沿着原型链往上查找,直到找到该属性或者到达原型链的末尾为止。

三、JS继承用法

1. 原型链继承

原型链继承就是将父类的实例作为子类的原型,子类可以通过原型链继承到父类的属性和方法。

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

function Child() {}

Child.prototype = new Parent(); 

// test
var child = new Child();
child.sayHello(); // Hello parent

2. 借用构造函数继承

借用构造函数继承就是子类使用父类的构造函数来构造自己的对象,相当于复制父类的属性和方法,实现了对父类属性的继承。但是父类原型中的方法和属性是无法继承的。

function Parent() {
  this.names = ['parent1', 'parent2'];
}

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

// test
var child1 = new Child();
child1.names.push('child1');
console.log(child1.names); // ["parent1", "parent2", "child1"]

var child2 = new Child();
console.log(child2.names); // ["parent1", "parent2"]

3. 组合继承

组合继承是将原型链继承和借用构造函数继承结合起来。通过原型链来实现对父类原型中方法和属性的继承,通过借用构造函数来实现对父类实例属性的继承。

function Parent() {
  this.name = 'parent';
  this.names = ['parent1', 'parent2'];
}

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

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

Child.prototype = new Parent();
Child.prototype.constructor = Child;

// test
var child = new Child();
child.names.push('child');
console.log(child.names); // ["parent1", "parent2", "child"]

child.sayHello(); // Hello parent

4. 原型式继承

原型式继承是通过原型对象来实现继承,它的本质是对一个对象的封装,返回一个可以继承该对象属性和方法的新对象。

var parent = {
  name: 'parent',
  sayHello: function() {
    console.log('Hello ' + this.name);
  }
};

var child = Object.create(parent);
child.name = 'child';

// test
child.sayHello(); // Hello child

5. 寄生式继承

寄生式继承是在原型式继承的基础上添加一些方法和属性,返回一个继承了原对象的扩展对象。

var parent = {
  name: 'parent',
  sayHello: function() {
    console.log('Hello ' + this.name);
  }
};

function createChild(obj) {
  var child = Object.create(obj);

  child.sayHi = function() {
    console.log('Hi ' + this.name)
  }

  return child;
}

var child = createChild(parent);
child.name = 'child';

// test
child.sayHi();  // Hi child
child.sayHello(); // Hello child

6. 寄生组合式继承

寄生组合继承是将组合继承中的一个缺点——继承原型对象时调用了一次父类构造函数——通过寄生继承方式解决。

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

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

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

function createObject(obj) {
  function F() {}
  F.prototype = obj;
  return new F();
}

Child.prototype = createObject(Parent.prototype);
Child.prototype.constructor = Child;

// test
var child = new Child();
console.log(child.name); // parent
console.log(child.age); // 18

child.sayHello(); // Hello parent

以上就是关于“15分钟深入了解JS继承分类、原理与用法”的完整攻略,希望能对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:15分钟深入了解JS继承分类、原理与用法 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • 微信小程序 input输入框控件详解及实例(多种示例)

    下面就为你详细讲解“微信小程序 input输入框控件详解及实例(多种示例)”的完整攻略。 一、概述 在微信小程序中,我们常常用到前端开发的基础控件之一 input,该控件主要用于获取用户输入的数据。 二、类型 微信小程序 input 控件主要有以下几个属性类型: 1. text text 输入框类型是最基础也是最常用的一种,可以输入任意字符,长度没有限制。 …

    JavaScript 2023年6月10日
    00
  • JavaScript知识点总结(六)之JavaScript判断变量数据类型

    下面是JavaScript判断变量数据类型的完整攻略。 根据typeof操作符判断变量数据类型 JavaScript的typeof操作符可以判断一个变量的类型,其语法为: typeof variable 其中variable为需要判断类型的变量。typeof操作符会返回这个变量的数据类型字符串,比如:”number”、”string”、”boolean”、”…

    JavaScript 2023年5月28日
    00
  • 探讨js字符串数组拼接的性能问题

    探讨JS字符串数组拼接的性能问题 在开发中,我们经常需要对字符串进行拼接操作,特别是基于HTML标签的文本拼接,因此对于拼接操作的性能问题需谨慎对待,当操作次数较小时,性能影响可忽略,但当操作次数较多时,性能问题将显著影响代码的执行速度。本文将着重分析字符串数组的拼接性能问题,并提供一些优化解决方案。 字符串数组拼接(Array.prototype.join…

    JavaScript 2023年5月28日
    00
  • Javascript中return的使用与闭包详解

    让我为您详细讲解Javascript中return的使用与闭包详解。 Javascript中return的使用 在JavaScript中,return语句用于将函数执行的结果返回给调用方。当函数调用return时,它会停止执行函数并返回一个值。除非使用void关键字,否则JavaScript中的函数始终返回一个值,无论是直接返回还是返回undefined。下…

    JavaScript 2023年6月10日
    00
  • js contains方法实现代码

    当我们需要在一个字符串中查找特定字符或子串时,可以使用JavaScript提供的 contains() 方法。下面是实现 contains() 方法的代码: String.prototype.contains = function(substr) { return this.indexOf(substr) !== -1; } 这里定义了一个全局方法 Stri…

    JavaScript 2023年5月28日
    00
  • 微信小程序如何在页面跳转时进行页面导航

    微信小程序的页面开发,需要进行页面间的跳转和导航。下面是在微信小程序中进行页面导航的完整攻略。 一、使用 Navigator 组件进行页面跳转 使用 Navigator 组件 进行页面跳转是微信小程序中最基础的导航方式。其使用方式如下: <navigator url="/pages/index/index"> 跳转到首页 &l…

    JavaScript 2023年6月11日
    00
  • javaScript中封装的各种写法示例(推荐)

    JavaScript中封装的各种写法示例,可以用于将代码进行模块化,提高代码复用性和可维护性。以下是常用的封装写法及示例说明: 函数封装 在JavaScript中,最常用的封装方式就是使用函数进行封装。函数封装可以将一段功能代码封装成一个具有独立作用的函数,以便多次调用、重复使用。下面是一个简单的加减乘除的函数封装示例: // 定义一个加减乘除的函数计算器 …

    JavaScript 2023年6月10日
    00
  • ASP vbs 代码大小写规范

    ASP(Active Server Pages)是一种基于服务器的脚本语言,支持使用vbs(Visual Basic Script)进行编程。在编写ASP vbs代码时,要遵守一定的大小写规范,以保证代码的可读性和可维护性。 下面是ASP vbs代码的大小写规范攻略: 1. 变量命名规范 变量名应该有意义并保持小写字母,不同单词之间使用下划线 (_) 连接。…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部