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日

相关文章

  • js cookie实现记住密码功能

    下面是关于“js cookie实现记住密码功能”的完整攻略。 什么是cookie Cookie 是一种小的文本数据,它通常由一个网站的服务器发送到网站的浏览器之后就被存储在浏览器的本地硬盘上。每当该浏览器向同一网站再次发出请求时,它就会将这些 Cookie 信息发送给该网站的服务器。 如何使用js cookie实现记住密码功能 一般情况下,我们可以通过设置一…

    JavaScript 2023年6月11日
    00
  • JavaScript中DOM操作常用事件总结

    下面将详细讲解“JavaScript中DOM操作常用事件总结”的攻略。 标题 “JavaScript中DOM操作常用事件总结” 介绍 在JavaScript中,DOM操作是非常常见的,而操作DOM的过程中,经常会用到事件。本攻略将对JavaScript中常用的DOM事件进行总结和讲解。 常用DOM事件 以下是常用的DOM事件: click – 鼠标点击事件 …

    JavaScript 2023年6月10日
    00
  • 使用cookie绕过验证码登录的实现代码

    首先,在介绍使用cookie绕过验证码登录的实现前,有必要了解一下什么是cookie。 什么是cookie 在前后端分离的web应用中,一般使用cookie来维持用户的登陆状态,如购物车、身份认证、页面交互等。cookie是一种储存在用户浏览器中的小型文本文件,通常包含一些用于搜索查询、网站记住用户信息、统计网站访问数量和收集访客习惯数据等等。具体实现方式是…

    JavaScript 2023年6月11日
    00
  • 关于javascript document.createDocumentFragment()

    下面是关于 document.createDocumentFragment() 的详细攻略: 简介 document.createDocumentFragment() 方法创建并返回了一个空文档节点 DocumentFragment。DocumentFragment 可以看作是一个轻量级的文档对象,可以用来在文档的 DOM 结构上进行操作,而不会对文档本身产…

    JavaScript 2023年6月10日
    00
  • Javascript Object对象类型使用详解

    Javascript Object对象类型使用详解 在 Javascript 中,Object 对象类型是最重要的类型之一。它是一种可以容纳各种数据类型的复合类型,用于表示对象实体或无序集合。在本文中,我们将详细讲解 Object 对象类型的各个方面,包括创建、读写属性、遍历、方法和继承等。 创建 Object 对象 使用 Object 构造函数或对象字面量…

    JavaScript 2023年5月27日
    00
  • js实现简洁的滑动门菜单(选项卡)效果代码

    下面我将详细讲解“js实现简洁的滑动门菜单(选项卡)效果代码”的完整攻略。 一、需求分析 我们需要实现一个简洁的滑动门菜单效果,点击菜单选项时,显示对应的内容区域,同时将当前选项高亮显示。具体实现步骤如下: 定义html结构,包含菜单选项和对应的内容区域。 使用CSS设置菜单选项和内容区域的布局样式,使其呈现滑动门效果。 使用JavaScript实现点击事件…

    JavaScript 2023年6月10日
    00
  • JS获取时间的相关函数及时间戳与时间日期之间的转换

    获取时间的相关函数及时间戳与时间日期之间的转换 在JavaScript中,获取时间的方法非常多,包括获取时间戳、获取当前日期时间等。下面我们来依次介绍这些函数。 1.获取时间戳: 时间戳指的是距离1970年1月1日0时0分0秒(UTC时间)的时间差,单位为毫秒。获取时间戳有两种方式: (1) Date.now() 函数 这个函数返回当前时间的时间戳,它等价于…

    JavaScript 2023年5月27日
    00
  • Javascript Date toLocaleDateString() 方法

    以下是关于JavaScript Date对象的toLocaleDateString()方法的完整攻略,包括两个示例说明。 JavaScript Date对象的toLocaleDateString()方法 JavaScript的toLocaleDateString()方法返回一个表示对象日期部分的本地化字符串,该字符串格式根据本地化设置定。该方法可以接受一个或…

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