带你读《现代Javascript高级教程》七、原型和原型链(4)

简介: 带你读《现代Javascript高级教程》七、原型和原型链(4)

带你读《现代Javascript高级教程》七、原型和原型链(3)https://developer.aliyun.com/article/1349648?groupCode=tech_library


4.原型继承

原型继承是一种通过继承原型对象来创建新对象的方式。在 JavaScript 中,我们可以使用多种方式实现原型继承。原型继承的概念是通过将一个对象作为另一个对象的原型来实现继承,从而使新对象可以共享原型对象的属性和方法。

 

1) 对象字面量和 Object.create():可以使用字面量对象定义属性和方法,并使用 Object.create() 方法创建一个新对象,并将其原型设置为现有对象的原型。

 

var parent = {
  name: "Parent",
  sayHello: function() {
    console.log("Hello, I am " + this.name);
  }};
var child = Object.create(parent);
child.name = "Child";

 

2) 构造函数和 Object.create():可以使用构造函数定义对象,并通过 Object.create() 方法将新对象的原型连接到现有对象的原型上。

 

function Parent(name) {
  this.name = name;}
Parent.prototype.sayHello = function() {
  console.log("Hello, I am " + this.name);};
function Child(name) {
  Parent.call(this, name);}
Child.prototype = Object.create(Parent.prototype);Child.prototype.constructor = Child;
var child = new Child("Child");

 

  1. 构造函数和 new 关键字:可以使用构造函数创建对象实例,并使用 new 关键字进行实例化。

 

function Parent(name) {
  this.name = name;}
Parent.prototype.sayHello = function() {
  console.log("Hello, I am " + this.name);};
function Child(name) {
  Parent.call(this, name);}
Child.prototype = new Parent();Child.prototype.constructor = Child;
var child = new Child("Child");

 

  1. 寄生组合继承

寄生组合继承是一种常用的原型继承方式,结合了构造函数继承和原型链继承的优点,避免了原型链中不必要的属性复制和方法重复定义的问题。这种方式先通过构造函数继承属性,然后通过设置原型链继承方法。

 

function Parent(name) {
  this.name = name;}
Parent.prototype.sayHello = function() {
  console.log("Hello, I am " + this.name);};
function Child(name, age) {
  Parent.call(this, name);
  this.age = age;}
Child.prototype = Object.create(Parent.prototype);Child.prototype.constructor = Child;
var child = new Child("Child", 10);

 

以上是常用的原型继承实现方式,每种方式都有其特点和适用场景。根据具体的需求和代码结构,可以选择最适合的方式来实现原型继承。

 

 

  1. 参考资料
  • MDN Web Docs - Object.create()open in new window
  • MDN Web Docs - Inheritance and the prototype chainopen in new window
  • JavaScript.info - Prototypal Inheritanceopen in new window
  • Eloquent JavaScript - Object-Oriented Programming
相关文章
|
3天前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承通过原型链实现共享,节省内存,但不支持私有属性。
19 0
|
3天前
|
JavaScript 前端开发 安全
JavaScript原型链的使用
【4月更文挑战第22天】JavaScript中的原型链是理解继承的关键,它允许对象复用属性和方法,减少代码冗余。示例展示如何通过原型链实现继承、扩展内置对象、构造函数与原型链的关系以及查找机制。应注意避免修改`Object.prototype`,使用安全方式设置原型链,并谨慎处理构造函数和副作用。
|
3天前
|
JavaScript 前端开发 网络安全
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
16 4
|
3天前
|
Web App开发 JavaScript 前端开发
《手把手教你》系列技巧篇(三十九)-java+ selenium自动化测试-JavaScript的调用执行-上篇(详解教程)
【5月更文挑战第3天】本文介绍了如何在Web自动化测试中使用JavaScript执行器(JavascriptExecutor)来完成Selenium API无法处理的任务。首先,需要将WebDriver转换为JavascriptExecutor对象,然后通过executeScript方法执行JavaScript代码。示例用法包括设置JS代码字符串并调用executeScript。文章提供了两个实战场景:一是当时间插件限制输入时,用JS去除元素的readonly属性;二是处理需滚动才能显示的元素,利用JS滚动页面。还给出了一个滚动到底部的代码示例,并提供了详细步骤和解释。
31 10
|
1天前
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
1天前
|
前端开发 JavaScript
前端 js 经典:原型对象和原型链
前端 js 经典:原型对象和原型链
11 1
|
1天前
|
JavaScript 前端开发
JavaScript高级四、高阶技巧
JavaScript高级四、高阶技巧
|
2天前
|
JavaScript 前端开发
JavaScript 原型链继承:掌握面向对象的基础
JavaScript 原型链继承:掌握面向对象的基础
|
3天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
18 2
|
3天前
|
存储 JavaScript 前端开发
Javascript教程
Javascript教程
9 0