Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JavaScript面试卷(三) -- 原型链的根源

JavaScript面试卷(三) -- 原型链的根源

作者头像
用户7293182
发布于 2022-01-17 13:57:17
发布于 2022-01-17 13:57:17
36800
代码可运行
举报
文章被收录于专栏:jQuery每日经典jQuery每日经典
运行总次数:0
代码可运行

JavaScript 有个原型链,既然是链,那它肯定存在链的起始和链的结束。上篇文章中有这样一句话:

每个对象都有一个__proto__对象属性(除了Object);每个函数都有一个Prototype 对象属性。

一个函数本身就是一个对象,它的原型链由自身发出(链的结束),一直延伸到 Object 的 prototype(链的起始)。

当访问一个对象的属性时,先检查自身属性,如果没有,则会沿着原型链一直找下去。(上文有详细结束)

一、Object.prototype

Object.prototype 属性表示 Object 的原型。JavaScript 中几乎所有的对象都是 Object 的实例;所有的对象都继承了 Object.prototype 的属性和方法,它们可以被覆盖(除了以null 为原型的对象,如Object.create(null))。例如,新的构造函数的原型覆盖原来的构造函数的原型,提供它们自己的 toString() 方法。对象的原型的改变会传递到所有对象上,除非这些属性和方法被其他对象原型链更里层的改动所覆盖。

就以 toString() 方法为例:

1. 最根本的 toString()

默认情况下,toString() 方法被每个继承自Object的对象继承。如果此方法在自定义对象中未被覆盖,toString() 返回“[object type]”, 其中 type 是对象类型。

例如:

被重写的对象也可以通过 call 或者 apply 函数调用最原始的toString()方法。

这个 toString() 的最佳事件,有兴趣的同志们可以查看一下 jQuery 中 type 方法的实现。

注:从JavaScript 1.8.5开始,用null 调用 toString() 方法会返回 [object Null],类似的用undefined 调用会返回 [object Undifined]。

2. 重写的 toString()

可以在新创建的函数的原型上自定义 一个方法来取代默认的 toString() 方法。该方法不能传入参数并且必须返回一个字符串。自定义的 toString() 方法可以是我们需要的值,但如果它附带有关对象的信息,它将变的非常有用。

在下面的代码中,定义了一个Dog对象数据类型,并且创建了该对象的一个实例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function Dog(name,breed,color,sex) {
  this.name=name;
  this.breed=breed;
  this.color=color;
  this.sex=sex;
}
var theDog = new Dog( 
      "Gabby","Lab","chocolate","female");

如果当前的对象调用了 toString() 方法,它将会返回从 Object 继承下来的 toString() 方法的返回默认值:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
theDog.toString(); // 返回 [object Object]

下面的代码中定义了一个叫做 dogToString() 的方法来覆盖默认的 toString() 方法。这个方法生成一个 "property = value" 形式的字符串,该字符串包含了当前对象的 name, breed,color 和 sex的值。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Dog.prototype.toString = function dogToString() {
 var ret = "Dog " + this.name 
          + " is a " + this.sex 
          + " " + this.color 
          + " " + this.breed;
 return ret;
}

有了上面的这段代码之后,在上下文中任何时候使用 theDog ,JavaScript 都会自动调用 dogToString() 方法,并且返回下面的字符串内容:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Dog Gabby is a female chocolate Lab
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-07-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 jQuery每日经典 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript原型链
JavaScript中的原型链是一种机制,用于实现对象之间的属性和方法的继承。原型链由对象的隐式原型([[Prototype]])组成,它允许对象在找不到属性或方法时向上查找并在原型链中的上级对象中查找。
堕落飞鸟
2023/05/17
2060
JavaScript原型链与继承
只要是对象,一定有原型对象,就是说只要这个东西是个对象,那么一定有proto属性。(错的)
用户7043603
2022/02/26
1.6K0
​JavaScript 原型与原型链:深入理解 JavaScript 的核心机制
JavaScript 是一门非常灵活和强大的编程语言,它的核心机制之一就是原型和原型链。理解 JavaScript 原型和原型链对于成为一名优秀的 JavaScript 开发者是非常重要的。因此在这篇博客中,我将深入探讨 JavaScript 原型和原型链,帮助开发者更好地理解 JavaScript 的核心机制。
Front_Yue
2023/12/25
6820
​JavaScript 原型与原型链:深入理解 JavaScript 的核心机制
JavaScript原型链继承
在JavaScript中,每个对象都有一个原型(prototype),原型本身也是一个对象。当我们访问一个对象的属性或方法时,如果该对象本身没有该属性或方法,JavaScript会自动去它的原型对象中查找。如果原型对象也没有找到,JavaScript会继续在原型对象的原型上查找,这样形成了一个原型链。
堕落飞鸟
2023/05/17
4370
《深入探秘JavaScript原型链与继承机制:解锁前端编程的核心密码》
在JavaScript的奇妙世界里,原型链与继承机制犹如隐藏的宝藏,掌握它们,就如同拿到了开启高效编程大门的钥匙。对于前端开发者来说,这不仅是写出简洁、可维护代码的关键,更是深入理解JavaScript面向对象编程的基石。今天,就让我们一同揭开它们神秘的面纱。
程序员阿伟
2025/04/18
890
《深入探秘JavaScript原型链与继承机制:解锁前端编程的核心密码》
JavaScript继承和原型链
JS在加载构造函数时,会在内存中生成一个对象,这个对象称为函数的原型对象(prototype)。
前端航航
2022/11/11
4760
Javascript原型链您了解多少
JS面向对象中的原型 每一个函数都有一个属性 即原型对象(显式原型:prototype)这个原型对象默认指向一个Object空对象,同时每一个原型对象(prototype)都有一个属性(constructor)又指向构造函数(构造函数和它的原型对象相互引用),同时每一个实例对象又有一个__proto__属性(隐式原型),这个属性指向其构造函数的原型对象 (Fn.prototype===fn.__proto__)。
切图仔
2022/09/08
1920
Javascript原型链您了解多少
JavaScript 设计模式学习第五篇-继承与原型链
JavaScript 是一种灵活的语言,兼容并包含面向对象风格、函数式风格等编程风格。我们知道面向对象风格有三大特性和六大原则,三大特性是封装、继承、多态,六大原则是单一职责原则(SRP)、开放封闭原则(OCP)、里氏替换原则(LSP)、依赖倒置原则(DIP)、接口分离原则(ISP)、最少知识原则(LKP)。
越陌度阡
2020/11/26
3090
JavaScript 设计模式学习第五篇-继承与原型链
Javascript之其实我觉得原型链没有难的那么夸张!
  原型链、闭包、事件循环等,可以说是js中比较复杂的知识了,复杂的不是因为它的概念,而是因为它们本身都涉及到很多的知识体系。所以很难串联起来,有一个完整的思路。我最近想把js中有点意思的知识都总结整理一下,虽然逃不开一些一模一样的内容,但是自己造一下轮子,按照自己的思路。也别有一番味道。
zaking
2020/08/19
7760
JavaScript学习总结(四)——this、原型链、javascript面向对象
根据题目要求,对给定的文章进行摘要总结。
张果
2018/01/04
1.5K0
JavaScript学习总结(四)——this、原型链、javascript面向对象
JS进阶-原型链
__proto__(原型指向):实例对象内部的 __proto__ 连接到其构造函数的 prototype,形成原型链。
吃猫的鱼Code
2025/02/14
1430
JS进阶-原型链
JavaScript 面试要点: 原型链
函数的 prototype 属性指向了一个对象,这个对象是调用该构造函数而创建的实例的原型,也就是上面的 p1 和 p2 的原型。
Cellinlab
2023/05/17
1810
JavaScript 面试要点: 原型链
JavaScript String、Array、Object、Date 常用方法小结
  反正闲着也是闲着,稍微整理总结了一下 JavaScript 字符串、数组、对象、时间的常用方法,阿彪出品,必属精品/滑稽。
老猫-Leo
2023/12/11
2850
【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】上篇
❗️ ❗️ ❗️本篇系将带来JavaScript中的构造——原型——原型链——继承——ES6类语法系列知识完整讲解。 ❗️ ❗️ ❗️ ❕上篇涉及:构造——原型——原型链 ❕下篇涉及:继承——ES6类语法
好吃懒洋洋
2022/11/15
7920
【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】上篇
js原型链污染
前两天,做了一道CTF题目,遇到了js原型链污染。 js原型,我的理解,类似于java中的静态属性。
cultureSun
2023/12/22
2370
js原型链污染
深入JavaScript原型链污染
相比其他语言(如Java、python等传统OOP语言),JavaScript的机制和类完全不同。
raye
2024/02/04
2401
JavaScript 进阶教程(3)---让你彻底搞懂原型链和继承
关于原型在JavaScript 进阶教程(1)--面向对象编程这篇文章已经讲过了,今天简单来复习一下。
AlbertYang
2020/09/08
5340
JavaScript 进阶教程(3)---让你彻底搞懂原型链和继承
JavaScript继承与原型链
当谈到继承时,JavaScript 只有一种结构:对象。每个实例对象(object)都有一个私有属性(称之为 __proto__)指向它的构造函数的原型对象(prototype)。该原型对象也有一个自己的原型对象(__proto__),层层向上直到一个对象的原型对象为 null。根据定义,null 没有原型,并作为这个原型链中的最后一个环节。
Andromeda
2023/10/21
1970
JavaScript继承与原型链
动图学 JavaScript 之:原型继承
你是否曾思考为什么我们能使用 JS 中的一些内置属性和方法,比如 .length,.split(),.join()?我们并没有显式地声明它们,那么究竟它们从哪里来的呢?可不要说什么“那是 JS 中的魔法!”。其实这些都因为一个叫做 原型继承(prototypal inheritance) 的东西。它太棒啦,你平时也经常会用到,只不过可能没有注意!
savokiss
2020/02/18
6140
动图学 JavaScript 之:原型继承
javaScript原型链
javaScript原型链 概念 JavaScript之继承(原型链) 数据结构 var Person = function(){}; Person.prototype.type = 'Person'; Person.prototype.maxAge = 100; 分支主题 prototype(原型) constructor(构造方法) Person.prototype.constructor === Person; 自己的构造,指向自己. 无限循环 proto(原型链) Person.prototype.proto === Object.prototype 指向Object对象prototype(原型) proto(原型链/遗传进化链) 第一层指向,Function对象prototype(原型) 分支主题 Person.proto === Function.prototype 同时Function对象的proto(原型链)也指向Function的prototype(原型) Function.proto === Function.prototype 第二层指向,Object对象prototype(原型) 分支主题 Person.proto.proto === Object.prototype 第三次指向,null Person.proto.proto.proto === null var p = new Person(); console.log(p.maxAge); p.name = 'rainy'; 分支主题 实例对象没有prototype原型属性 仅具有proto(原型链) 第一层指向,Person对象prototype(原型) new Person().proto === Person.prototype 第二层指向,Object对象prototype(原型) new Person().proto.proto == Object.prototype 第二层指向,还等同Person对象的第二层指向 new Person().proto.proto === Person.proto.proto 第三次指向,null new Person().proto.proto.proto === null prototype、proto的关系 dir(Array) 分支主题 dir(new Array()) new Array().proto === Array.prototype true Array.prototype 分支主题 Array. 分支主题 可访问form直接方法 也可访问Array.proto内方法 也可访问Array.proto.proto.... 内方法[继承] 检验是否非进化链proto继承的属性 分支主题 .hasOwnProperty("") 构造指向自己 Array.prototype.constructor === Array true Array.prototype.constructor.prototype.constructor.prototype.constructor .... function Array() { [native code] } proto 分支主题 遗传进化链 or 进化链指针 进化链指针 new String().proto === String.prototype JS内置构造器和自定义函数都是Function构造器的原型(prototype) Array.proto === Function.prototype true String.proto === Function.prototype true Function.proto === Function.prototype true 只有Function.prototype是函数(function)类型 分支主题 为了保证函数构造器们的proto指向的都是函数 不能new的目标 分支主题 没有构造函数(不是函数),不能new 分支主题 分支主题 function才有构造,object没有 继承控制 Object Object.setPrototypeOf(child, parent); Object.prototype.extend class class Porsche extends Car function inherits(Chinese, People) & People.call(this, name, age) inherits(Chinese, People) 分支主题 分支主题 分支主题 作用 c
达达前端
2020/05/09
5210
相关推荐
JavaScript原型链
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验