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

理论+实践:从原型链到继承模式,掌握 Object 的精髓(二)

在之前的文章中我们说过,视图引用对象的属性时会触发 [[Get]] 操作,比如 myObject.a。对于默认的 [[Get]] 操作来说,第一步是检查对象本身是否有这个属性,如果有的话就使用它。...构造函数 function Foo(){ // } var a = new Foo(); • 在以上代码为什么会让我们认为 Foo 是一个类?...创建关联 • 那 [[Prototype]] 机制的意义是什么?为什么要创建这些关联?...访问对象中不存在的一个属性时,[[Get]] 操作就会查找对象内部 [[Prototype]] 关联的对象,这个关联关系就是一条 "原型链"(有点像嵌套的作用域),在找到属性时会对它进行遍历。...否则,这条赋值语句就会被忽略。总之,不会发生屏蔽。 3. 如果在 [[Prototype]] 原型链上层存在对象中的属性并且它是一个 setter,那就一定会调用这个 setter。

6010

petite-vue源码剖析-逐行解读@vuereactivity之reactive

在petite-vue中我们通过reactive构建上下文对象,并将根据状态渲染UI的逻辑作为入参传递给effect,然后神奇的事情发生了,状态发生变化时将自动触发UI重新渲染。...,否则若属性对象,则将其构造响应式对象(reactive)或只读对象(readonly) //文件 ....readonly(res) : reactive(res) } } } 这里可以看到读取属性时才根据属性值类型来属性值构造响应式对象,而不是当我们调用reactive时就一股脑的遍历对象所有属性...在上述代码中我们发现会使用到Proxy拦截函数入参receiver,如: 那么到底receiver是什么?...另外,我们可以看到访问子代理对象没有的属性时会访问其原型链的对象查找属性,并且get拦截器的receiver保持指向子代理对象。

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

《你不知道的JavaScript》:原型链访问的坑

试图引用对象的属性时会触发[[Get]]操作,例如obj.a和newObj.a。对于默认的[[Get]]操作来说,第一步是检查对象本身是否有这个属性,如果有的话就使用它。...通常对象属性设置值我们采用=赋值操作符来进行,对象obj的foo属性设置值时: 1obj.foo = "bar"; 如果obj对象中包含名为foo的普通数据访问属性,这条赋值语句只会修改已有的属性值...如果属性名foo既出现在obj对象上也出现在上层原型对象上,那就会发生屏蔽,obj对象中包含的foo属性会屏蔽原型链上层的所有foo属性,因为obj.foo总是会选择原型链中最底层的foo属性。...但如果foo不直接存在于obj对象而是存在于原型链上层对象,赋值语句obj.foo = "bar";会按照不同情况来执行:(下面有对应代码示例) 如果原型链上层对象存在名为foo的普通访问数据属性并且没有被标记为只读...如果原型链上层对象存在foo属性并且还被标记为只读(`writable: false`),那么就无法修改已有属性或在obj对象上创建屏蔽属性

55720

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

JavaScript 实践+理论(总结篇):作用域、闭包、this、对象原型 作用域与闭包 第一章 作用域是什么 • 作用域:根据标识符查找变量的一套规则。...在 JavaScript 中为什么 typeof null 会返回 object?...访问对象中一个不存在的属性时,[[Get]] 操作就会查找对象内部的 [[Prototype]] 关联的对象,而这个关联关系就像是嵌套的作用域,在查找属性时会对其进行遍历查找。...如果对象中的某个属性不直接存在于某个对象上时会发生以下几种情况: myObject.foo = 'bar'; let a = { foo: 'atxt', }; let c = Object.create...否则,这条赋值语句就会被忽略。总之,不会发生屏蔽。 1.

6310

原型

那么,这个到底是什么意思? 先看_proto_开始说起 每一个JS对象一定对应一个原型对象,并且从原型对象那里继承属性和方法。...我们先把这个问题往后放,先搞清楚prototype和_proto_有什么区别?...现在我们完整地讲解一下这个过程 myObject.foo = "bar"; 如果myObject对象中包含名为foo的普通数据访问属性,这条赋值语句只会修改已有的属性值。...否则,这条赋值语句会被忽略。总之,不会发生屏蔽。 如果在 [Prototype] 链上层存在 foo 并且它是一个 setter(参见第 3 章),那就一定会调用这个 setter。...给对象添加属性大多数情况是第一种情况,但是原型链已存在该同名属性时,我们就不能用=来赋值了。我们可以用Object.defineProperty来向对象添加属性

66820

JavaScript 对象可以做到的三件事

作者:John Au-Yeung 译者:前端小智 来源:medium 除了普通的对象属性赋值和遍历之外,我们还可以使用 JavaScript 对象执行许多其他操作。...在本文中,我们将了解如何使用它们,包括访问内部属性、操作属性描述符和继承只读属性。 1. 访问内部属性 JavaScript 对象无法以常规方式访问的内部属性。...属性描述符对象 数据属性包含了一个数据值的位置,在这个位置可以读取和写入值。也就是说,数据属性可以通过 对象.属性 访问,就是我么平常接触的用户赋什么值,它们就返回什么,不会做额外的事情。...foo.a 赋值时,如: foo.a = 2; 如果关闭了严格模式,浏览器将忽略,否则将抛出一个错误,因为我们将 writable 设置 false, 表示该属性不可写。...3.无法分配继承的只读属性 继承的只读属性不能再赋值。这是有道理的,因为我们这样设置它,它是继承的,所以它应该传播到继承属性的对象。

69640

TypeScript 初学者入门学习笔记(一)

拥有活跃的社区,大多数常用的第三方库都提供了类型声明,并且开源免费 JavaScript 的缺点 首先JavaScript 是一门非常灵活的编程语言: 它没有类型约束,一个变量可能初始化时是字符串,又被赋值数字...基于原型的面向对象编程,使得原型上的属性或方法可以在运行时被修改。 TypeScript 的类型系统,在很大程度上弥补了 JavaScript 的缺点。 为什么使用 TypeScript?...void { alert('My name is Tom'); } 然而声明一个 void 类型的变量没什么用,因为只能将其赋值 undefined 和 null: let unusable:...对象中的一些字段只能在创建时被赋值,可以使用 **readonly **定义只读属性: 例一:使用 readonly 定义的属性 id 初始化后,又被重新赋值,所以会报错。...例二:只读的约束存在于第一次给对象赋值的时候,而不是第一次给只读属性赋值时: interface Person { readonly id: number; name: string;

1.8K20

死磕JS:闭包到底是个什么鬼?

我们开始吧~ 函数调用时发生什么? 为了理解闭包,首先我们需要完全理解 JavaScript 到底是如何工作的! 那么函数调用是会发生什么?...注意,我们实际上可以访问函数执行期间可用的“新”数据,而不是声明。这就是词法作用域在 JavaScript 中的工作方式。 但是如果我们返回一个函数,而不是仅仅在外部函数体中调用它,会发生什么?...如果你想知道闭包到底有什么用,请继续看下面的示例。 01 模块封装 闭包允许我们保护或隐藏某些信息。[[scope]] 是一个隐藏的属性,所以我们不能像使用标准对象那样访问和更新它。...在下面的代码片段中,我们利用了所谓的IIFE(立即执行函数),它允许我们消除调用外部函数的中间步骤,就像我们赋值时直接调用它一样。...export 出去, 提供给其他人使用,我们他准备的 API 不允许他更改 apiKey,这就做到了只读属性,除了在源代码中重写它之外,调用方不可能更改它。

32620

Prototype (原型)

如果 foo 不直接存在于 myObject 中而是存在于原型链上层时 myObject.foo ="bar" 会出现的三种情况: 如果在 [[Prototype]] 链上层存在名为 foo 的普通数据访问属性并且没有被标记为只读...否则,这条赋值语句会被忽略。总之,不会发生屏蔽。 如果在 [[Prototype]] 链上层存在 foo 并且它是一个 setter,那就一定会调用这个 setter。...无论添加什么标签都无法改变事实 :一种水果是苹果,另一种是橘子。更好的方法是直接把苹果叫作苹果——使用更加准确并且直接的术语。 继承 意味着复制操作,JavaScript (默认)并不会复制对象属性。...# “构造函数” function Foo() { // ... } var foo = new Foo(); 到底是什么我们认为 Foo 是一个“类”?...换句话说,在 JavaScript 中对于“构造函数”最准确的解释是,所有带 new 的函数调用。函数不是构造函数,但是且仅使用 new 时,函数调用会变成“构造函数调用”。

32720

TypeScript学习笔记(二)—— TypeScript基础

有时候我们希望对象中的一些字段只能在创建的时候被赋值,那么可以用 readonly 定义只读属性: interface Person { readonly id: number; name...注意,只读的约束存在于第一次给对象赋值的时候,而不是第一次给只读属性赋值的时候: interface Person { readonly id: number; name: string...上例中,报错信息有两处,第一处是在对 tom 进行赋值的时候,没有给 id 赋值。 第二处是在给 tom.id 赋值的时候,由于它是只读属性,所以报错了。...上面的例子中,我们需要将 window 上添加一个属性 foo,但 TypeScript 编译时会报错,提示我们 window 上不存在 foo 属性。...任何类型都可以被断言 any any 可以被断言任何类型 那么类型断言有没有什么限制

5K20

iOS:关于WWDC2020-Objective-C运行时的改进

* clean memory:指加载后不会发生更改的内存。class_ro_t 就属于 clean memory,因为它是只读的。 * dirty memory:指在进程运行时会发生更改的内存。...虽然这些数据足以让我们开始,但运行时需要追踪每个类的更多信息,所以一个类首次被使用,运行时会为它分配额外的存储容量。...但为什么方法和属性也在只读数据中时,这里还要有方法和属性?...因为它们可以在运行时进行更改, category 被加载时,它可以向类中添加新的方法,而且程序员可以使用运行时 API 动态的添加它们,而 class_ro_t 是只读的,所以我们需要在 class_rw_t...三、tagged pointer 什么是 tagged pointer

47920

TypeScript手记(三)

它代表了有一个 label 属性且类型string 的对象。需要注意的是,我们在这里并不能像在其它语言里一样,说传给 printLabel 的对象实现了这个接口。我们只会去关注值的外形。...你可以在属性名前用 readonly 来指定只读属性: interface Point { readonly x: number readonly y: number } 你可以通过赋值一个对象字面量来构造一个...对象字面量会被特殊对待而且会经过额外属性检查,将它们赋值给变量或作为参数传递的时候。如果一个对象字面量存在任何“目标类型”不包含的属性时,你会得到一个错误。...width,那么就无所谓它们的类型是什么。...这是因为使用 number 来索引时,JavaScript 会将它转换成string 然后再去索引对象。

87720

Vuejs 设计与实现 —— 渲染器核心:挂载与更新

下面是 Vue3.x 中定义最基本的 VNode 结构:vnode.type 是节点类型:标签、文本、注释、Fragment、Component 等vnode.props 是节点属性数据:HTML Attributes...只读 属性的 DOM Properties,不能直接进行赋值,因此也必须转换为 el.setAttribute(key, value) 的处理,如: 中的 form...属性就是只读属性源码中抽离了 shouldSetAsProp 用于去判断是否可通过 DOM Properties 去更新:特殊处理 classVue.js 对 class 做了增强:指定 class...最简单的方法:移除 之前的事件处理函数重新绑定 新的事件处理函数但这种方式并不是最优的方式,毕竟需要来回 移除、注册 才能实现事件更新,有没有什么方法是可以只注册一次事件,也能实现事件更新的方式?...,这里的更新时指,在初次挂载完成之后,后续渲染还会触发更新,只不过新 vnode 会变成 null,从而进入卸载阶段:容器的内容可能是某个或多个组件渲染的,卸载发生时,应该正确地调用这些组件的 beforeUnmount

51440

这也许是你会遇到的Google Chrome Bug

我们来看看打印结果: 执行 child.name = 'WangHaoyu' 时,实质上相当于我们在为 child 实例对象上进行赋值操纵自然而然和原型上的 name 属性并不会有任何关系。...Getter/Setter 在 JavaScript 定义对象时,我们同时可以通过 [[Getter]]、[[Setter]] 来属性绑定对应的执行函数。...同样调用 console.log(obj.name) 时,相当于进行了 LTS 查询(当然上边的赋值操作不仅仅会触发 LTS 同时会触发 RHS)。...的普通数据访问属性,那么这条赋值语句机会修改已有的属性值。...所谓 Getter/Setter 在某些情况下会发生属性的屏蔽,至于是什么情况下看到这里相信大家都已经了解的非常清楚了。 Chrome Bug 最后,我们再来看看 Chrome 下对于这一情况的展现。

33510

前端入门8-JavaScript语法之数据类型和变量声明正文-数据类型、变量

但在 JavaScript 中,声明一个变量却没有进行赋值操作的话,默认值不是 null,而是 undefined。 那么,什么场景下,变量的值会是 null ?...意思就是说,null 是 JavaScript 设计出来的一个表示空值含义的数据类型,用来给你在程序中有需要给某个变量手动设置空值的场景时使用。...这也是为什么用 typeof 运算符获取 null 的数据类型时,会发现输出的是 Object。因为 null 实际上是个实际存在的数据值,只是它的含义是空值的意思,用于赋值给对象类型的变量。...undefined 还有另外一种场景: 访问对象中不存在的属性时,此时会输出 undefined,表示这个属性并未在对象中定义。...隐式转换 因为属性是对象才有的特性,所以对某个原始类型的变量进行属性操作时,此时会临时创建一个包装对象,属性操作结束后销毁包装对象。

1.5K30

iOS今日头条第3轮面试回忆

三、编程题:实现以下功能 1) 编写一个自定义类:Person,父类NSObject 解析:头文件这样写 @interface Person:NSObject 2) 该类有两个属性,外部只读属性name...正常情况下,属性默认是readwrite,可读写,如果我们设置了只读属性,就表明不能使用setter方法。...修饰不可变类型的属性时,如NSArray、NSDictionary、NSString,用copy。 4.7 题目: 分类中添加实例变量和属性分别会发生什么,编译时就报错吗,还是什么时候会发生问题?...那我们就按照这个流程来,在类别中属性添加set/get方法,在set方法里面赋值的时候找不到赋值的对象,也就是说系统没有为我们生成带下划线的成员变量,没生成我们就自己加。...如果不加atomic会怎么样内存长度大于地址总线的时候,例如在64位系统下内存中读取无法像bool等纯量类型原子性完成,可能会在读取的时候发生写入,从造成异常情况。

1.4K20

深入浅出React(一):React的设计哲学 - 简单之美

React认为属性应该是只读的,一旦赋值过去后就不应该变化。关于状态和属性的使用在后续文章中还会深入探讨。...React的初衷之一就是,既然整体刷新一定能解决层叠更新的问题,那我们什么不索性就每次都这么做?让框架自身去解决哪些局部UI需要更新的问题。...Action可以来自于用户的某个界面操作,比如点击提交按钮;也可以来自服务器端的某个数据更新。数据模型发生变化时,就触发刷新整个界面。...让数据模型也变简单:Immutability Immutability含义是只读数据,React提倡使用只读数据来建立数据模型。...针对只读数据,Facebook开发了一整套框架immutable.js,将只读数据的概念引入JavaScript,并且在github开源。

1K20

深入浅出React(一):React的设计哲学 - 简单之美

React认为属性应该是只读的,一旦赋值过去后就不应该变化。关于状态和属性的使用在后续文章中还会深入探讨。...React的初衷之一就是,既然整体刷新一定能解决层叠更新的问题,那我们什么不索性就每次都这么做?让框架自身去解决哪些局部UI需要更新的问题。...Action可以来自于用户的某个界面操作,比如点击提交按钮;也可以来自服务器端的某个数据更新。数据模型发生变化时,就触发刷新整个界面。...让数据模型也变简单:Immutability Immutability含义是只读数据,React提倡使用只读数据来建立数据模型。...针对只读数据,Facebook开发了一整套框架immutable.js,将只读数据的概念引入JavaScript,并且在github开源。

96950
领券