Javascript 原型与原型链深入详解

Javascript 原型与原型链深入详解

原型

在JavaScript中,每一个对象都有一个指向其原型的属性,称之为 __proto__,原型本身也是一个对象。在Javascript中使用函数构造对象时,函数本身也有一个原型属性,称之为 prototype。我们可以使用 Object.getPrototypeOf() 方法实现查找一个对象的原型。比如:

let arr = [1, 2, 3];
let arrProto = Object.getPrototypeOf(arr);
console.log(arrProto); //输出:[object Array]

通过查找到原型,我们可以发现,arr 的原型是一个 Array 对象。

原型链

原型链是基于原型的一个特性。每一个对象都有原型,原型也是对象,也有原型,这样随着原型的递归查找,我们就得到了一个原型链。在Javascript中,我们可以通过以下方式实现查找原型链:

let arr = [1, 2, 3];
let arrProto = Object.getPrototypeOf(arr);
let arrProtoProto = Object.getPrototypeOf(arrProto); //获取原型的原型
console.log(arrProto); // [object Array]
console.log(arrProtoProto); // [object Object], 最终的原型为 Object.prototype

在这个例子中,我们可以看到,arrProto 对象的原型是 Array.prototypeArray.prototype 的原型是 Object.prototype,这就形成了一个原型链。

原型继承

在Javascript中,对象的属性可以继承自它的原型,我们称之为原型继承。在创建一个对象时,我们可以将该对象的原型指向任何一个对象。比如,我们可以通过以下方式实现:

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

let personProto = {
    sayHello:function() {
        console.log(`Hello ${this.name}`);
    }
};

Person.prototype = personProto;

let tom = new Person('Tom');
tom.sayHello(); //输出:Hello Tom

在这个例子中,我们创建了一个 Person 函数以及一个 personProto 对象,然后将 Person.prototype 指向 personProto,这就意味着所有使用 new Person() 创建的对象都将继承 personProto 对象中的属性和方法。

示例说明

示例一

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

Animal.prototype.sayName = function() {
    console.log(`My name is ${this.name}`);
}

function Dog(name, color) {
    Animal.call(this, name);
    this.color = color;
}

Dog.prototype = Object.create(Animal.prototype); //继承 Animal的原型
Dog.prototype.constructor = Dog; //重置构造函数为 Dog

Dog.prototype.bark = function() {
    console.log('Woof!');
}

let dog = new Dog('Buddy', 'Golden');
dog.sayName(); // 输出:"My name is Buddy"
dog.bark(); // 输出:"Woof!"

在这个例子中,我们创建了一个 Animal 函数,使用 Animal.prototype 创建一个原型,并绑定一个 sayName 方法。然后我们创建了一个 Dog 函数,并调用 Animal.call(this, name) 来实现其属性继承。然后我们使用 Object.create(Animal.prototype) 来创建一个新的 Dog 原型,并继承 Animal.prototype,最后重置构造函数为 Dog

示例二

class Animal {
    constructor(name) {
        this.name = name;
    }

    sayName() {
        console.log(`My name is ${this.name}`);
    }
}

class Dog extends Animal {
    constructor(name, color) {
        super(name);
        this.color = color;
    }

    bark() {
        console.log('Woof!');
    }
}

let dog = new Dog('Buddy', 'Golden');
dog.sayName(); // 输出:"My name is Buddy"
dog.bark(); // 输出:"Woof!"

在这个例子中,我们使用ES6的 class 语法创建了一个 Animal 类,和一个 Dog 类,并使用 extends 实现 Dog 对象继承 Animal 类。最后我们创建了一个 Dog 实例并调用其方法。

总结

原型与原型链是Javascript中非常重要的一部分,可以用于实现继承等功能,同时原型链也是Javascript中一个非常特殊的机制。我们需要掌握原型及其链的概念和实现方法,并应用到实际的代码中去。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Javascript 原型与原型链深入详解 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码

    以下是详细的攻略: JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码 在移动端开发过程中,为了适配不同尺寸的手机屏幕,我们需要对页面进行自适应缩放。那么如何实现呢?下面是两种基于 JavaScript 的实现方法。 方法一 通过 JavaScript 获取文档宽度,然后按比例进行缩放。 (function () { function se…

    JavaScript 2023年6月10日
    00
  • 原生JS面向对象实现打砖块小游戏

    一、前言 打砖块小游戏是经典的游戏之一,其规则简单,玩法有趣且易上手。本篇攻略将带领大家使用原生JS面向对象的方式来实现打砖块小游戏。 二、需求分析 打砖块小游戏的基本需求如下: 游戏界面要有一个球、多个砖块和一个挡板,球碰到砖块或者挡板之后反弹。 球和挡板可以通过鼠标或者键盘来控制。 游戏结束条件:砖块被撞完或者球跌落屏幕下方。 三、实现步骤 Step 1…

    JavaScript 2023年6月10日
    00
  • Javascript循环删除数组中元素的几种方法示例

    针对 “Javascript循环删除数组中元素的几种方法示例” 这个主题,我会给出详细的讲解。下面是本次攻略的完整目录: 目录 前言 常规方法:for循环+splice 优化方法1:倒序循环+splice 优化方法2:将要删除的元素移动到末尾+pop 总结 前言 Javascript是一种弱类型的脚本语言,最大的特点就是非常灵活。但是在生产环境中,我们不仅要…

    JavaScript 2023年5月28日
    00
  • 使用Map处理Dom节点的方法详解

    下面详细讲解如何使用Map处理Dom节点的方法: 一、Map介绍 Map对象是一组键值对的集合,具有极快的查找速度,由于本身是可迭代对象,因此我们可以使用for…of对其进行遍历。常用的Map方法有set、get、size和clear等。 二、通过Map处理Dom节点 在前端开发中,为了提高性能,我们通常需要对Dom节点进行频繁的操作,这时候就可以使用M…

    JavaScript 2023年6月10日
    00
  • 使用js获取url中的参数并返回一个对象方式

    获取URL中的参数对于前端开发来说是一个很常见的需求,这里介绍两种使用JS获取URL参数并返回一个对象的方法。 方法一:使用URLSearchParams URLSearchParams是浏览器提供的一个内置对象,可以方便的获取URL参数。以下是具体的实现过程: function getSearchParams() { const params = new …

    JavaScript 2023年5月28日
    00
  • js中的reduce()函数讲解

    JS中的reduce()函数讲解 什么是reduce()函数? reduce()函数是JavaScript中常用的数组方法之一,其作用是对数组中的元素进行迭代,并将它们合并到单个值中。该函数接收两个参数:累加器函数(accumulator)和初始值(initialValue)。 累加器函数接受4个参数: accumulator (缩写为a):进行迭代计算时累…

    JavaScript 2023年5月27日
    00
  • d3.js入门教程之数据绑定详解

    d3.js入门教程之数据绑定详解 什么是d3.js? d3.js全称Data-Driven Documents,是一个非常强大的数据可视化库。使用d3.js可以将数据转化为各种图表、动画和交互式图形。 为什么需要数据绑定? 数据绑定是在d3.js中非常重要的概念,因为它是将数据和元素结合在一起的基础。在d3.js中,元素是表示数据的最终呈现形式。因此,了解如…

    JavaScript 2023年6月10日
    00
  • 原生js实现淘宝首页点击按钮缓慢回到顶部效果

    实现淘宝首页点击按钮缓慢回到顶部效果可以采用原生Javascript,下面是具体的实现步骤: 1. 获取回到顶部按钮以及页面滚动条 首先,在页面中添加“回到顶部”按钮,然后使用JS代码获取该按钮以及页面滚动条的对象: var scrollBtn = document.getElementById(‘scrollBtn’); var scrollTop = d…

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