首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript中的显示原型和隐形原型(理解原型链)

显式原型:prototype 隐式原型:__proto__ 1.显式原型和隐式原型是什么?...在js中万物皆对象,方法(Function)是对象,方法的原型(Function.prototype)是对象,对象具有属性(__proto__)称为隐式原型,对象的隐式原型指向构造该对象的构造函数的显式原型...方法(Function)是一个特殊的对象,除了和其他对象一样具有__proto__属性以外,它还有一个自己特有的原型属性(prototype),这个属性是一个指针,指向原型对象。...2.二者的关系 隐式原型指向创建这个对象的函数的prototype 首先我们来看如何创建一个对象 a.通过对象字面量的方式。...其中通过Object.creat(o)创建出来的对象他的隐式原型指向o。 通过对象字面量的方式创建的对象他的隐式原型指向Object.prototype。

3.2K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    深入理解javascript中的继承机制(1)原型链继承机制将共有的属性放进原型中

    javascript中的继承机制是建立在原型的基础上的,所以必须先对原型有深刻的理解,笔者在之前已经写过关于js原型的文章。...当我们使用new操作符调用构造函数,创建一个新对象的时候,这个新对象就会拥有一个指向它的构造函数的原型对象的神秘链接,在浏览器中一般是proto,通常我们也称为它的原型对象。...下面我们对以上原型链关系进行测试 ? Paste_Image.png 上图我们可以看到清晰的一个原型链关系。 ?...将共有的属性放进原型中 如上个例子中的,name属性是三中对象共有的,上个例子每个单独的对象都会new出一个name属性,这样就造成了对空间的浪费。...所以在某些时候,就没法使用这种继承模式,这种将共享的属性移到原型中的模式,会产生子对象覆盖掉父对象共有属性的缺陷。

    53720

    JavaScript的原型继承在使用中存在的安全问题

    JavaScript的原型很多人都知道也很好用,但是很多人在使用原型继承中导致的安全问题却很少人知道,接下来我们就来好好了解一下。...在真实开发中,我们经常会在代码中使用Property accessors 属性访问器,并且使用用户输入的参数去访问某个对象的属性。...这看起来可能是一个很稀疏平常的操作,但是往往在这个过程中我们的代码就已经产生了一个很大的安全漏洞!!!为什么这样写代码会产生安全问题?...黑客通过在原型上添加属性,他们可以解锁更多用户权限,比如网站修改权限,vip权限等等来攻击你的网站让你的网站承受损失。...在代码中减少属性访问器的使用尽可能使用.的方式去访问对象的属性或者使用 Map或Set,来代替我们的对象检查对象的原型链,查看新创建对象的原型是否被恶意添加了原本不该有的属性,或者属性被修改检查用户的输入

    19211

    充分了解JavaScript中的对象,顺便弄懂你一直不明白的原型和原型链

    JavaScript——对象 引言 正文 一、对象的定义 二、对象的创建 三、对象的原型以及原型链 四、对象的属性 (1)属性的查询与设置 (2)属性的删除 (3)属性的检测 (4)特殊的属性 (5...)属性的特性 五、对象的特性 (1)对象的原型 (2)对象的类 (3)对象的扩展 结束语 引言 相信很多小伙伴学习了javascript,但是对于对象只是有一个初步的认识,并且对于对象的原型和原型链之类的概念还没有很好的认识吧...,那么你们可以先看正文的第二部分,然后再看第三部分,就能充分理解原型和原型链的概念了 一、对象的定义 对象是JavaScript的基本数据类型,对象内部是由一个个的名/值对组成的,例如下面我们常见的。...在JavaScript中,绝大部分的对象都有一个共同的原型,他就是 Object.prototype ,也就是说 Object.prototype 是最原始的那家餐饮店,而非加盟店。...(obj) //返回 {x:1} isPrototypeOf( ) 该方法可以判断一个对象是否是另一个对象的原型,或者说在另一个对象的原型链上。

    29810

    从ECMAscript标准文档看懂valueOf

    翻译过来就是: 参数类型 返回结果 Undefined 抛出 TypeError 异常 Null 抛出 TypeError 异常 Boolean 创建一个Boolean对象,初始值为参数值 Number...String 创建一个String对象,初始值为参数值 Symbol 创建一个Symbol对象,初始值为参数值 Object 返回参数值 到了这里,貌似可以停止查阅文档了,但是我们不要忘了一个事情那就是原型链...,这只是定义在Object对象原型链上的。...同时在文档中可以查阅到诸如 Set the value of O’s [[NumberData]] internal slot to n 之类的话语, ?...接下来需要考虑的就是Date、Math、functioin等对象的原型是否定义了 valueOf 方法,通过搜索查阅手册可以发现在这些对象中只有Date对象重写了 valueOf 方法 ?

    80410

    JavaScript松散类型变量如何检测类型?

    在 ECMAScript 规范中,共定义了 7 种数据类型,分为 基本类型 和 引用类型 两大类。 基本类型 也称为简单类型,按值访问。 引用类型 也称为复杂类型,按址访问。...从技术角度讲,函数在ECMAScript中是对象,不是一种数据类型。然而,函数也确实有一些特殊的属性,因此通过typeof操作符来区分函数和其他对象是有必要的。...与instanceof不同的是,在访问基本数据类型的属性时,JavaScript会自动调用其构造函数来生成一个对象。...但在基本数据类型中,null和undefined调用constructor会抛出TypeError异常。 null.constructor // TypeError!...因为null是JavaScript原型链的起点,undefined是无效对象,都没有构造函数,也就不存在constructor属性。

    92620

    学会JS中如何轻松检查变量类型

    在 ECMAScript 规范中,共定义了 7 种数据类型,分为 基本类型 和 引用类型 两大类。基本类型 也称为简单类型,按值访问。图片引用类型 也称为复杂类型,按址访问。...从技术角度讲,函数在ECMAScript中是对象,不是一种数据类型。然而,函数也确实有一些特殊的属性,因此通过typeof操作符来区分函数和其他对象是有必要的。...其二,constructor指向的是最初创建当前对象的函数,是原型链最上层的那个方法:与instanceof不同的是,在访问基本数据类型的属性时,JavaScript会自动调用其构造函数来生成一个对象。...但在基本数据类型中,null和undefined调用constructor会抛出TypeError异常。null.constructor // TypeError!...因为null是JavaScript原型链的起点,undefined是无效对象,都没有构造函数,也就不存在constructor属性。

    41000

    JavaScript中的错误处理机制

    Error对象 JavaScript解析或执行时,一旦发生错误,引擎就会抛出一个错误对象。JavaScript原生提供一个Error构造函数,所有抛出的错误都是这个构造函数的实例。...代码解析或运行时发生错误,JavaScript引擎就会自动产生、并抛出一个Error对象的实例,然后整个程序就中断在发生错误的地方,不再往下执行。...throwit函数,然后是在catchit函数,最后是在函数的运行环境中。...JavaScript的原生错误类型 Error对象是最一般的错误类型,在它的基础上,JavaScript还定义了其他6种错误,也就是说,存在Error的6个派生对象。...; throw new ReferenceError('you didn\'t cite your references properly'); 利用原型链还可以通过继承Error来创建自定义错误类型。

    2K30

    JavaScript 实践+理论(总结篇):作用域、闭包、this、对象原型

    在该模式下,RHS 找到一个变量当对这个变量进行不合规的操作时会抛出一个 TypeError, 而 ReferenceError 代表着在作用域查找或判断失败,TypeError 代表作用域查找成功了,...在 JavaScript 中为什么 typeof null 会返回 object?...对象属性访问中通过 . 操作符访问被称为属性访问,通过 [] 操作符访问被称为键访问。 4. 对象操作的快捷方法: • 严格模式: 抛出 TypeError 错误 • 非严格模式:静默失败 1....(),propertyIsEnumerable() 只会检查属性是否在某个对象中,不会检查 [[Prototype]] 原型链。...在 JavaScript 中对于构造函数最准确的解释是,所有带 new 的函数调用。 6. 何为原型链?

    10010

    深入学习 JavaScript——Object 对象

    Object–JavaScript世界的起源 JavaScript的世界中「一切皆是对象」,而所有对象的起源就是 Object 对象。 神說:「要有光」。就有了光。...Object简介 JavaScript中的对象其实是一组数据和功能的集合。我们通过执行 new 操作符 + 对象类型的名称来创建对象。...__proto__ = {}; // 抛出异常TypeError Object.constructor 所有对象都会从它的原型上继承一个 constructor 属性, constructor 属性是保存当前对象的构造函数...false o.hasOwnProperty('hasOwnProperty'); // false Object.prototype.isPrototypeOf() 返回一个布尔值,表示指定的对象是否在本对象的原型链中...如果存在分配错误,此函数将引发 TypeError,这将终止复制操作。如果目标属性不可写,则将引发 TypeError。

    63920

    Js中Reflect对象

    Js中Reflect对象 Reflect是ES6起JavaScript内置的对象,提供拦截JavaScript操作的方法,这些方法与Proxy对象的handlers中的方法基本相同。...N/A getPrototypeOf() Object.getPrototypeOf()返回给定对象的原型。如果没有继承的原型,则返回null。在ES5中为非对象抛出TypeError。...如果设置的原型不是Object或null,或者被修改的对象的原型不可扩展,则抛出TypeError。...isExtensible() 如果对象是可扩展的,则Object.isExtensible()返回true,否则返回false,如果第一个参数不是对象,则在ES5中抛出TypeError,在ES2015...preventExtensions() Object.preventExtensions()返回被设为不可扩展的对象,如果参数不是对象,则在ES5中抛出TypeError,在ES2015中,参数如为不可扩展的普通对象

    3.7K10

    JavaScript instanceof 运算符深入剖析

    规范中的所有 [[...]] 方法或者属性都是内部的, 在 JavaScript 中不能直接使用。并且规范中说明,只有 Function 对象实现了 [[HasInstance]] 方法。...__proto__;  } } JavaScript 原型继承机制 由于本文主要集中在剖析 JavaScript instanceof 运算符,所以对于 JavaScript 的原型继承机制不再做详细的讲解...在 JavaScript 原型继承结构里面,规范中用 [[Prototype]] 表示对象隐式的原型,在 JavaScript 中用 __proto__ 表示,并且在 Firefox 和 Chrome...至于显示的原型,在 JavaScript 里用 prototype 属性表示,这个是 JavaScript 原型继承的基础知识,在这里就不在叙述了。 图 1. JavaScript 原型链 ?...__proto__ = null // 第三次判断 L == null // 返回 false 简析 instanceof 在 Dojo 继承机制中的应用 在 JavaScript 中,是没有多重继承这个概念的

    62420

    JavaScript中的链式调用

    说到链式调用,就有必要说一下JavaScript的可选链操作符,属于ES2020新特性运算符?....=,可选链操作符?.允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?....首先定义一个最基本的类,通过原型链去继承方法。...' of undefined 通过定义一个类并且实现实例化之后,在实例之间可以共享原型上的方法,而直接通过_jQuery类直接去调用显然是不行的,抛出的第一种异常是因为在_jQuery类上不存在静态方法...,但是在jQuery中$()的主要目标还是作为选择器用来选择元素,而现在返回的是一个_jQuery.fn对象,显然是达不到要求的,为了能够取得返回的元素,那就在原型上定义一个init方法去获取元素,这里为了省事直接使用了

    4.1K30

    JavaScript中的链式调用

    说到链式调用,就有必要说一下JavaScript的可选链操作符,属于ES2020新特性运算符?....=,可选链操作符?.允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?....首先定义一个最基本的类,通过原型链去继承方法。...' of undefined 通过定义一个类并且实现实例化之后,在实例之间可以共享原型上的方法,而直接通过_jQuery类直接去调用显然是不行的,抛出的第一种异常是因为在_jQuery类上不存在静态方法...,但是在jQuery中$()的主要目标还是作为选择器用来选择元素,而现在返回的是一个_jQuery.fn对象,显然是达不到要求的,为了能够取得返回的元素,那就在原型上定义一个init方法去获取元素,这里为了省事直接使用了

    89510

    JavaScript 语言精粹笔记1-语法、对象、函数

    {...}代码块不会创建新的作用域,因此变量应该被定义在函数的头部,而不是在代码块中。...JavaScript 包含一种原型链的特性,允许对象继承另一个对象的属性。正确地使用它能减少对象初始化时消耗的时间和内存。 对象字面量 一个对象字面量就是包围在一对花括号中的零或多个“名/值”对。...不会检查原型链。 枚举 使用for in可以遍历一个对象中的所有属性名,包括原型链上的属性名。可以使用hasOwnProperty过滤原型链上的属性,使用typeof来排除函数。...它不会触及原型链中的任何对象。...参数this在面向对象编程中非常重要,它的值取决于调用的模式。JavaScript中一共有4中调用模式:方法调用模式、函数调用模式、构造器调用模式、apply调用模式。

    41520

    编写可维护代码3:适当的抛出错误提示

    在js开发中,调试错误是一个比较头疼的事,又不像java的debug那么方便,定位错误往往不是那么容易,除非对代码熟悉无比,但即使是自己写的代码,功能一复杂,时间一长,再想快速定位问题,至少我现在是比较头疼的...:期望的对象不存在时抛出,如试图在一个null对象引用上调用一个函数。...SyntaxError:给eval()函数传递的代码中有语法错误时抛出 TypeError:变量不是期望类型时抛出。...单例模式 javascript设计模式二:策略模式 javascript设计模式三:代理模式 javascript设计模式四:迭代器模式 javascript设计模式五:原型模式 javascript...设计模式六:发布-订阅模式(观察者模式) javascript设计模式七:模板方法模式 javascript设计模式八:职责链模式 javascript设计模式九:中介者模式 javascript

    1K50
    领券