Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >第171天:面向对象——对象实例和原型对象进阶

第171天:面向对象——对象实例和原型对象进阶

作者头像
半指温柔乐
发布于 2018-09-11 02:01:13
发布于 2018-09-11 02:01:13
72000
代码可运行
举报
文章被收录于专栏:前端知识分享前端知识分享
运行总次数:0
代码可运行

一、实例拷贝原理

当实例化的时候,都会将构造函数的属性拷贝一份,同时赋给新值

因为有的构造函数有默认值

一旦你给实例赋给了新值,就会将内存空间替换掉

Function对象

定义的各种数据类型的变量最终其实都是一个对象

var str = ‘1’

var str = new String()

var sum = 1;

var = new Number()

同样的,函数也是这样:

所有函数其实都是Function的实例

constructor属性其实就是Function对象的一个属性而已

对象又是通过函数实现的

对象其实就是一个Function 的一个实例而已。。。

所以构造函数其实就是Function对象的一个实例

实例拷贝自构造函数,所以实例含有Function对象的所有属性和方法

constructor

它就是用于检测某个实例的构造函数是哪个

其实constructor是构造函数的一个隐藏属性

为什么实例含有constructor属性

因为实例的属性都是拷贝自构造函数

拷贝所有的构造函数中的属性,包含你定义的也包含系统隐藏的

constructor属性是构造函数中的一个隐藏属性

二、原型进阶

原型的属性(方法)共享理论

原型对象不管实例化多少次,都只会生成一次。。

实例化的时候只拷贝构造函数中的属性,而不会拷贝原型对象中的属性

函数和对象

其实js中本来没有对象这个概念

利用函数实现了对象

原型对象本质:

原型对象的属性和方法可以被所有实例共享

这样,如果我们需要修改所有实例中的属性或者方法,就只需要修改一处,就能够影响到所有实例了

三、属性搜索机制

先在自身的属性列表中寻找,如果找到直接返回,如果找不到从原型中寻找。

如果找不到:先找到自身的一个隐藏属性prototype,这个属性中保存的是原型对象的地址

四、 双对象法则

其实所谓的对象包含两个独立的对象:构造函数对象,一个叫原型对象

那么他们之间是如何联系在一起的呢?

就是通过一个属性__proto__(V8 火狐 最新的EDGE)

但是早期的微软浏览器不不是通过__proto__来实现原型的。

但是__proto__已经成为ES5的一种标准。

__proto__属性是Function对象的一个属性而已

任何一个我们编写的函数其实都是Function对象

既然对象是函数实现的,那么对象当然也是Function的一个实例

所以构造函数含有Function对象中的一切属性和方法

constructor属性 prototype属性是Function对象中的属性之一

实例化的时候会拷贝构造中的属性和方法,自然就有了constructor属性和prototype属性

prototype属性:保存的就是地址

作用:将实例和原型对象联系在一起

属性搜索机制的本质:

就是通过这个prototype属性中保存的地址链接原型

结果都是tom,因为原型被所有实例共享,他们操作的其实是同一块内存区域

五、属性屏蔽理论

如果原型中和构造函数中有相同的属性的话:

第一点:你要会用属性搜索法则寻找出访问属性的链条

第二点:如果我们想访问原型中的被屏蔽掉的属性有两种方法:

  • delete
  • 使用Product.prototype.属性或者方法名称
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1 第二点:  /*清除乌云*/
2         delete product.name
3         console.log(product.name)
4 //        console.log(product.buy())
5 
6 
7         /*被屏蔽之后如何获取 */
8 //        console.log(Product.prototype.buy())
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-02-09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
第205天:面向对象知识点总结
JSON全称为JavaScript对象简单表示法(JavaScript Object Notation)
半指温柔乐
2018/09/11
6210
第205天:面向对象知识点总结
[JavaScript进阶]从JavaScript原型到面向对象
首先给出结论,JavaScript 的本身是支持面向对象的,它本身具备着强大灵活的 OOP 语言能力。但是对于使用过基于类的语言 (如 Java 或 C++) 的开发人员来说,JavaScript 确实有点令人困惑,因为它是动态的,并且本身不提供一个 class 实现。虽然在 ES6 中引入了 class 关键字,但它只是一个语法糖,本质还是基于JavaScript 的原型来实现的。
用户1462769
2019/08/12
6880
[JavaScript进阶]从JavaScript原型到面向对象
第198天:js---内置对象的原型链和其他知识
一、内置对象的原型链 1、Object原型 1 function test() {} 2 alert(test.toString()); 3 4 //新增属性 5 Object.prototype.mytest = function() { 6 alert("123"); 7 } 8 var o = new Object(); 9 o.mytest(); 10 11 //重写属性 12 Object.proto
半指温柔乐
2018/09/11
4920
js面向对象理解
ECMAScript 有两种开发模式:1.函数式(过程化),2.面向对象(OOP)。面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。但是,ECMAScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同。
全栈若城
2024/02/29
2510
js面向对象理解
面向对象编程
面向对象把构成问题的transaction分解成各个对象,而建立对象的目的也不是为了完成一个个步骤,而是为了描述某个事物在解决整个问题的过程中所发生的行为,意在写出通用代码,加强代码重用,屏蔽差异性。
子舒
2022/06/09
7400
面向对象编程
深入理解原型对象和原型链
原型对象和原型链在前端的工作中虽然不怎么显式的使用到,但是也会隐式的使用了,比如使用的jquery,vue等啦。在进入正题的时候,我们还是需要明白什么是__proto__,prototype等知识点,主要讲解构造函数,这篇博文大多是问答形式进行...
Jimmy_is_jimmy
2019/07/31
6350
前端day17-JS高级(原型对象)学习笔记
01-面向对象编程 1.1-面向对象编程介绍 1.理解什么是面向对象编程 面向对象不是一门技术,而是一种解决问题的思维方式 面向对象的本质是对面向过程的一种封装 2.理解什么是对象 对象的本质是程序代码与现实世界沟通的一座桥梁。它有两种函数 对象:是一种数据类型(存储数据的容器),以键值对的形式存储数据 对象:对现实世界实物的一种抽象。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</t
帅的一麻皮
2020/05/07
5350
前端day17-JS高级(原型对象)学习笔记
Javascript 原型链之原型对象、实例和构造函数三者之间的关系
首先来说一下名词解释,首先说一下prototype,每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。
OECOM
2020/07/01
7050
JS面向对象笔记二
注意点:当构造函数里面有return关键字时,如果返回的是非对象,new命令会忽略返回的信息,最后返回时构造之后的this对象;   如果return返回的是与this无关的新对象,则最后new命令会返回新对象,而不是this对象。示例代码:
tandaxia
2018/09/27
5.8K0
JS面向对象笔记二
一篇JavaScript技术栈带你了解继承和原型链
在学习JavaScript中,我们知道它是一种灵活的语言,具有面向对象,函数式风格的编程模式,面向对象具有两点要记住,三大特性,六大原则。
达达前端
2019/11/19
4810
帮助面向对象开发者理解关于JavaScript对象机制
对于不了解JavaScript语言,尤其是习惯了OO语言的开发者来说,由于语法上些许的相似会让人产生心理预期,JavaScript中的原型继承机制和class语法糖是让人迷惑的。
IMWeb前端团队
2019/12/03
4870
帮助面向对象开发者理解关于JavaScript对象机制
高级Js-面向对象编程
高级Js-面向对象编程 目录 JavaScript Window-浏览器对象模型 匿名包装器 工厂方式 工厂方式改进版 同一个引用 构造函数与new命令 prototype 对象 面向对象的写法 原型链 面向对象的继承 面向组件编程 命名空间 JavaScript Window-浏览器对象模型 浏览器对象模型(BOM) 所有浏览器都支持 window 对象. 它表示浏览器窗口. 全局变量是 window 对象的属性. 全局函数是 window 对象的方法. 甚至 HTML DOM 的 docu
星辉
2019/01/15
2K0
JavaScript 进阶教程(1)--面向对象编程
一本书、一辆汽车、一个人都可以是对象,一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象,实物之间的关系就变成了对象之间的关系,从而就可以模拟现实情况,针对对象进行编程。
AlbertYang
2020/09/08
5470
JavaScript 进阶教程(1)--面向对象编程
js面向对象编程_JavaScript高级编程
面向过程即分析出解决问题所需要的步骤,然后用函数将这些步骤一步步实现,使用的时候再一个个的一次调用就可以了;
全栈程序员站长
2022/09/24
1.2K0
js面向对象编程_JavaScript高级编程
第186天:js深入理解构造函数和原型对象
1.在典型的oop的语言中,如java,都存在类的概念,类就是对象的模板,对象就是类的实例。但在js中不存在类的概念,js不是基于类,而是通过构造函数(constructor)和原型链(propotype chains)实现的。但在ES6中引入了类(class)这个概念,作为对象的模板,新的class写法知识让原型对象的写法更加清晰,这里不重点谈这个
半指温柔乐
2018/09/11
7390
第186天:js深入理解构造函数和原型对象
JS进阶第三天
面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次
小城故事
2023/05/12
2400
《JS原理学习 (2) 》深入理解原型链与继承
JavaScript是一门面向对象的语言,所有的对象都从原型继承属性和方法,那么什么是原型?对象与对象之间如何实现继承?
神奇的程序员
2022/04/10
3380
《JS原理学习 (2) 》深入理解原型链与继承
深入JavaScript原型链污染
相比其他语言(如Java、python等传统OOP语言),JavaScript的机制和类完全不同。
raye
2024/02/04
2591
【前端基础进阶】JS原型、原型链、对象详解
在上面的例子中 o1 o2 o3 为普通对象, f1 f2 f3 为函数对象。 怎么区分,其实很简单,凡是通过 new Function() 创建的对象都是函数对象,其他的都是普通对象。 f1,f2,归根结底都是通过 new Function()的方式进行创建的。
super.x
2019/04/12
8210
【前端基础进阶】JS原型、原型链、对象详解
JS面向对象编程
通过instanceof来判断当前的的对象是否是实例化出来的,如果是实例化出来的this指向实例化出来的对象,也就是这里的Person,否则作为普通函数来说当前的this指向window
小丞同学
2021/08/16
4.2K0
相关推荐
第205天:面向对象知识点总结
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验