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日

相关文章

  • js原生Ajax的封装和原理详解

    下面是关于”js原生Ajax的封装和原理详解”的完整攻略: 什么是Ajax Ajax是指异步JavaScript和XML(Asynchronous Javascript and XML)技术,主要用于异步加载数据,是一种无需重新加载整个网页的情况下,能够更新部分网页的技术。 使用Ajax技术,通过XMLHttpRequest对象向服务器发送请求,并进行异步通…

    JavaScript 2023年6月11日
    00
  • 详解Javascript动态操作CSS

    详解Javascript动态操作CSS 概述 在网页中,CSS是控制网页样式的重要手段之一,而通过Javascript动态修改CSS,可以实现更加灵活的交互效果。本攻略将介绍如何通过Javascript来动态修改CSS。 获取元素 首先,需要获取到需要修改CSS的元素。可以通过document.getElementById、document.getEleme…

    JavaScript 2023年6月10日
    00
  • 解析页面加载与js函数的执行 onload or ready

    解析页面加载与js函数的执行 onload or ready 页面加载过程 当浏览器加载一个页面时,会按照以下步骤逐步完成页面的加载: 浏览器通过DNS解析获取目标网站的IP地址 浏览器向服务器发出请求,获取HTML文件 浏览器开始解析HTML,构建DOM树 遇到CSS和JS文件时,浏览器会解析它们,并执行其中的代码 解析完成后,浏览器构建出渲染树 渲染树和…

    JavaScript 2023年6月11日
    00
  • Javascript学习指南

    Javascript学习指南 如果你想在Web开发领域中站稳脚跟,那么学习JavaScript是非常重要的。下面是一个完整的学习攻略,可以帮助你快速入门并掌握JavaScript技能。 第一步:了解基本概念 在深入学习JavaScript之前,你需要先了解以下基本概念: 变量和数据类型 运算符 控制流语句 函数 对象和数组 深入了解这些基础知识可以帮助你更好…

    JavaScript 2023年5月17日
    00
  • 详解js静态检查工具eslint配置文件

    这里是详解js静态检查工具eslint配置文件的完整攻略: 一、什么是eslint? ESLint 是一种静态检查工具,可以用于检查 JavaScript 代码中的潜在问题。事实上,ESLint 是最流行的 JavaScript 静态检查工具之一。 二、eslint 配置文件 为了让 ESLint 对某些代码或规则进行特殊处理,我们需要在项目中添加一个配置文…

    JavaScript 2023年5月27日
    00
  • javascript学习笔记(十四) window对象使用介绍

    让我为你介绍关于“javascript学习笔记(十四) window对象使用介绍”的完整攻略。 一、什么是Window对象 Window对象是Javascript中最浏览器中最常用的内置对象之一,它代表了一个包含文档屏幕的浏览器窗口或者frame窗口。在Javascript中,window对象有许多用于窗口操作、URL导航、对话框显示等的属性和方法。 二、W…

    JavaScript 2023年5月27日
    00
  • Javascript定义类(class)的三种方法详解

    Javascript定义类(class)的三种方法详解 1. ES6 Class 首先,“ES6 Class”是一种相对简单的定义类的方法,它采用了一种“类”的概念,并以“class”关键字来定义类。这种方法最常用,也是最简单的定义类的方式。 class Person { constructor(name, age) { this.name = name; …

    JavaScript 2023年5月27日
    00
  • jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)

    下面是详细讲解“jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)”的完整攻略。 简介 本攻略主要讲解如何利用 jQuery 和 Cookie 实现一个本地收藏功能,在用户点击收藏按钮时,可以将当前页面地址存储在 Cookie 中,这样用户在下次打开网站时,还可以看到之前所收藏的内容。 步骤 步骤一:引入 jQuery 和 Cookie 库…

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