博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
从一道题解读JS原型链
阅读量:6324 次
发布时间:2019-06-22

本文共 2442 字,大约阅读时间需要 8 分钟。

之前对js原型和原型链的理解一直觉得很绕,绕来绕去的,在看了《JavaScript高级程序设计》和各种文章之后,终于对原型和原型链有了初步的了解,可是还是没有很深入的了解,今次通过以前段时间遇到的一道题,分析一下,用自己的想法进行解读,加深自己对原型和原型链的理解。

一、题目

下面程序运行结果是什么?

function Animal() {    this.name = 'Animal';}Animal.prototype.changeName = function (name) {    this.name = name;}function Cat() {    this.name = 'Cat';}var animal = new Animal();Cat.prototype = animal;Cat.prototype.constructor = Cat;var cat = new Cat();animal.changeName('Tiger');console.log(cat.name)

A. Animal

B. Cat
C. Tiger
D. 都不是

答案是 B Cat

二、解读

1. 原型对象

无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个
prototype属性,这个属性指向函数的原型对象。在默认情况下,所有的原型对象都会自动获得一个
constructor(构造函数)属性,这个属性是一个指向
prototype属性所在函数的指针。
下面用图来说明
function Animal() {    this.name = 'Animal';}Animal.prototype.changeName = function (name) {    this.name = name;}

图片描述

首先创建了一个Animal函数,Animal中含有一个prototype属性,指向Animal Prototype,而Animal.prototype.constructor指向Animal。这个时候由于name属性是在函数中定义的,所以不在Animal Prototype中,而changeName 函数是通过Animal.prototype.changeName定义的,所以我们可以通过这种方式,在实例化多个对象时,共享原型所保存的方法。

同理,当创建了Cat函数时,也是一样。

function Cat() {    this.name = 'Cat';}

图片描述

2. 创建实例

当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象。在ECMA-262第5版中管这个指针叫
[[Prototype]]。虽然在脚本中没有标准的方式访问
[[Prototype]],但Firefox、Safari和Chrome在每个对象上都支持一个属性
__proto__。明确重要的一点,这个连接存在于实例与构造函数的原型对象之间,而不是存在于实例与构造函数之间。

图片描述

// 将Cat的原型对象指向animal实例,获得animal中的属性,原有的属性丢失Cat.prototype = animal;

图片描述

这一部分相当于是把Cat的原型对象的指针指向了animal实例,所以原来Cat原型对象中的constructor属性丢失,替换成了animal实例中的属性,包括name属性以及__proto__内部属性,同时__proto__属性也指向Animal.prototype,因此Cat也可以通过原型链查找调用到Animal中的属性和方法。

// 相当于重新创建了constructor,指向Cat构造函数Cat.prototype.constructor = Cat;

图片描述

这一部分相当于是重新在原型对象中创建了一个constructor属性,同时指向Cat构造函数。

var cat = new Cat();   // 实例化一个Cat对象,跟实例化Animal相似

图片描述

3. 调用方法

animal.changeName('Tiger');

var animal = new Animal();实例化了一个Animal对象后,animal都包含一个内部属性,该属性指向了Animal.prototype;换句话说,animal与构造函数Animal没有直接的关系。可是,可以看到虽然在实例中不含changeName,但我们却可以调用animal.changeName(name),这是通过查找对象属性的过程来实现的,即:

首先查找实例中实例中animal是否有changeName方法,如果没有则继续寻找,去到Animal.prototype寻找是否有changeName方法,如果有则调用,没有则继续寻找,到Object.prototype中寻找,最后没找到则会返回一个null

很明显,在这里实例animal中没有changeName方法,所以需要到Animal.prototype寻找changeName方法,并调用成功修改了实例animal中的name属性,为Tiger

这个时候由于Cat.prototype是指向实例animal的,因此Cat.prototype中的name属性也变为Tiger

图片描述

console.log(cat.name)  // Cat

最后,获取cat.name,与查找方法同样,也是先去实例中cat查找是否含有name属性,在这里很明显是存在的,因此直接结束寻找,此时cat.name = 'Cat'

三、总结

通过这道题,加深了我对原型和原型链的理解,其实这道题也可以扩展到关于继承的知识点,在JavaScript中实现继承主要是依靠原型链来实现。之后等我再搞的更清楚一点再继续写吧。

此文章是本人自己对于原型和原型链的一点小小的理解,中间可能存在偏差或者错误的,请多多指点!!!

转载地址:http://avmaa.baihongyu.com/

你可能感兴趣的文章
KVM虚拟机介绍
查看>>
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(7)-MVC与EasyUI DataGrid
查看>>
Redis系列(六)-SortedSets设计技巧
查看>>
Latex技巧
查看>>
Android开发日记(一)
查看>>
java中简单字符替换
查看>>
【推荐】【给中高级开发者】构建高性能ASP.NET应用的几点建议
查看>>
ale.js 1.2.1 发布,以组件形式构建用户界面
查看>>
移动端web app自适应布局探索与总结
查看>>
前端开发中的正则表达式验证
查看>>
阿里巴巴微服务开源项目盘点(持续更新)
查看>>
中国工程院院士衣宝廉:预计国内明年将有100台加氢站运行 |电动车百人会2019 ...
查看>>
区块链溯源是什么?一文带您读懂!
查看>>
为什么很多人开始反对996了?
查看>>
一文说透WordPress的自定义文章类型
查看>>
Go并发编程之美-条件变量
查看>>
k8s与CICD--一个完整的drone demo
查看>>
Redis指令与数据结构(二)
查看>>
Ubuntu ibus输入法选中删除
查看>>
12月25日云栖精选夜读 | Python拼接字符串的七种方式 ...
查看>>