js面向对象编程,你需要知道这些
javascript中对象由key和value组成,key是标识符,value可以为任意类型
创建对象的方式
1、通过构造函数
var obj = new Object()
obj.name = 'alice'
obj.age = 18
2、通过字面量
var obj = {
name: 'alice',
age: 18
}
属性描述符
对属性进行精准的操作,比如定义属性是否可被删除、遍历或修改
1、语法
//定义一个属性
Object.defineProperty(Object, PropertyKey, attributes)
// 定义多个属性
Object.defineProperties(Object, properties)
2、属性描述符特征
| 属性 | 描述 | 通过对象定义时默认值 | 通过属性描述符定义时默认值 |
|---|---|---|---|
| configurable | 定义属性是否可被删除、重新定义 | true | false |
| enumerable | 定义属性是否可被枚举,如通过for in/Object.keys | true | false |
| writable | 是否可被修改 | true | false |
| value | 读取属性和修改的时候操作的值 | undefined | undefined |
| get | 获取属性时会执行的函数 | undefined | undefined |
| set | 设置属性时会执行的函数 | undefined | undefined |
3、属性描述符的分类
属性描述符分为数据属性描述符和读取属性描述符,数据属性描述符用来定义属性,读取属性描述符用于为函数中不愿意暴露的属性来进行读取和设置的操作
不同属性描述符可操作的属性也不一样
| 分类 | configurable | enumerable | writable | value | get | set |
|---|---|---|---|---|---|---|
| 数据属性描述符 | √ | √ | √ | √ | × | × |
| 存取属性描述符 | √ | √ | × | × | √ | √ |
4、定义
给obj对象添加skill属性,属性的描述为不可删除或重新定义、不可修改、可枚举
var obj = {
name: 'alice',
age: 18
}
Object.defineProperty(obj, 'skill', {
configurable: false,
writable: false,
enumerable: true,
value: 'flying',
})
console.log(obj)
delete obj.skill
console.log(obj)
obj.skill = 'swimming'
console.log(obj)
所以上面删除和修改都是无效的操作,执行结果如下

对象的其它方法
1、获取对象的属性描述符
- getOwnPropertyDescriptor
- getOwnPropertyDescriptors
2、操作属性
- preventExtensions 禁止新增属性
- seal 封闭属性,即禁止新增、删除属性
- freeze 冻结属性,即禁止新增、修改、删除属性
3、查询属性
- isExtensible 查询是否可新增属性
- isSealed 查询是否是封闭的属性
- isFrozen 查询是否是冻结的属性
var user = {
name: 'kiki',
age: 18
}
console.log('getOwnPropertyDescriptor', Object.getOwnPropertyDescriptor(user, 'name'))
console.log('getOwnPropertyDescriptors', Object.getOwnPropertyDescriptors(user))
Object.preventExtensions(user)
console.log('isExtensible', Object.isExtensible(user))
user.skill = 'flying'
console.log('user', user)
Object.seal(user)
console.log('isSealed', Object.isSealed(user))
delete user.age
console.log('user', user)
Object.freeze(user)
console.log('isFrozen', Object.isFrozen(user))
user.name = 'alice'
console.log(user)
以上代码执行结果如下

原型
1、隐式原型
每一个对象都有隐式原型,可通过Object.getPrototypeOf或者__proto__(存在浏览器兼容问题)获取,查找元素时,如果自身对象没有,会向原型上查找
var obj = {}
console.log(obj.__proto__)
console.log(Object.getPrototypeOf(obj))
console.log(obj.name)
obj.__proto__.name = 'alice'
console.log(obj.name)
对象的隐式原型指向空对象

2、显式原型
每个函数除了有隐式原型,还有显式原型prototype,prototype中有一个属性constructor指向函数自己
function foo(){}
console.log(foo.__proto__)
console.log(foo.prototype)
console.log(Object.getOwnPropertyDescriptors(foo.prototype))

构造函数
在构造函数中,通过new关键字可以批量创建对象
1、定义方式
function foo()
var f = new foo()
2、new关键字的操作
- 在内存中创建一个新对象(空对象)
- 对象的__proto__属性被赋值为构造函数的prototype属性
- 构造函数的this,将指向创建的对象
- 执行构造函数的代码
- 如果函数没有返回非空对象,则返回创建的新对象
3、在内存中的表现
new关键字会将创建的对象的__proto__属性赋值为构造函数的prototype属性
function Person(){}
var p1 = new Person()
var p2 = new Person()
console.log(p1.__proto__ === Person.prototype) // true
console.log(p1.__proto__ === p2.__proto__) // true
图示如下

以上就是面向对象编程的部分内容,下一篇记录js中实现继承的方式,关于js高级,还有很多需要开发者掌握的地方,可以看看我写的其他博文,持续更新中~
js面向对象编程,你需要知道这些的更多相关文章
- 带你一分钟理解闭包--js面向对象编程
上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...
- Js面向对象编程
Js面向对象编程 1. 什么是面向对象编程? 我也不说不清楚什么是面向对象,反正就那么回事吧. 编程有时候是一件很快乐的事,写一些小游戏,用编程的方式玩游戏等等 2. Js如何定义一个 ...
- js原生设计模式——3简单工厂模式\js面向对象编程实例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- JS面向对象编程(进阶理解)
JS 面向对象编程 如何创建JS对象 JSON语法声明对象(直接量声明对象) var obj = {}; 使用 Object 创建对象 var obj = new Object(); JS对象可以后期 ...
- 页面循环绑定(变量污染问题),js面向对象编程(对象属性增删改查),js字符串操作,js数组操作
页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...
- js面向对象编程 ---- 系列教程
原 js面向对象编程:数据的缓存 原 js面向对象编程:如何检测对象类型 原 js面向对象编程:if中可以使用那些作为判断条件呢? 原 js面向对象编程:this到底代表什么?第二篇 原 js面向对象 ...
- 简单粗暴地理解js原型链–js面向对象编程
简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...
- JS面向对象编程,对象,属性,方法。
document.write('<script type="text/javascript" src="http://api.map.baidu.com/api?v ...
- js面向对象编程(第2版)——js继承多种方式
附带书籍地址: js面向对象编程(第2版)
- 原生js面向对象编程-选项卡(自动轮播)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- 2023-04-08:社交网络中的最优邀请策略探究。本文以小红准备开宴会为例,提出一种基于贪心算法和二分查找的解决方案,帮助读者在保证愉悦值不低于k的前提下,最小化宴会的阶层差距。
2023-04-08:小红有n个朋友, 她准备开个宴会,邀请一些朋友, i号朋友的愉悦值为a[i],财富值为b[i], 如果两个朋友同时参加宴会,这两个朋友之间的隔阂是其财富值差值的绝对值, 宴会的隔 ...
- 2023-03-23:音视频解混合(demuxer)为PCM和YUV420P,用go语言编写。
2023-03-23:音视频解混合(demuxer)为PCM和YUV420P,用go语言编写. 答案2023-03-23: 大体步骤如下: 1.打开媒体文件,并获取音频和视频流. 2.对于每个流,找到 ...
- 2022-07-28:以下go语言代码输出什么?A:AA;B:AB;C:BA;D:BB。 package main import ( “fmt“ ) func main() { f
2022-07-28:以下go语言代码输出什么?A:AA:B:AB:C:BA:D:BB. package main import ( "fmt" ) func main() { f ...
- 2022-06-13:golang中,[]byte和结构体如何相互转换?
2022-06-13:golang中,[]byte和结构体如何相互转换? 答案2022-06-13: []byte和结构体的转换的应用场景是数据解析. 代码里有两种方法,一种是内存不共用,另一种是内存 ...
- 2020-03-02:在无序数组中,如何求第K小的数?
2020-03-02:在无序数组中,如何求第K小的数? 福哥答案2021-03-02: 1.堆排序.时间复杂度:O(N*lgK).有代码. 2.单边快排.时间复杂度:O(N).有代码. 3.bfprt ...
- 2021-09-01:三数之和。给你一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?请你找出所有和为 0 且不重复的三元组。
2021-09-01:三数之和.给你一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?请你找出所有和为 0 且不重复的三元组. ...
- Selenium - 元素操作(5) - iframe切换
Selenium - 元素操作 iframe切换 很多时候定位元素时候总是提示元素定位不到的问题,明明元素就在那里,这个时候就要关注你所 定位的元素是否在frame和iframe里面: frame标签 ...
- 【Linux】详解Centos7的下载安装配置
本文时间 2023-05-17 作者:sugerqube漆瓷 为什么是Centos7 centos8已经停止维护,centos7将在2024-06-30停止维护(所以暂时选7) 未来替代品参考: Al ...
- docker +node 部署vue项目的心路历程
最近自己做了个小项目,试着使用docker来进行发布,而其中用到了node做跨越代理,就是为了解决这个问题至少多花费了我一天时间,不说了直接进入主题吧 step 1 部署环境 1 安装 centos ...
- Java 泛型:理解和应用
概述 泛型是一种将类型参数化的动态机制,使用得到的话,可以从以下的方面提升的你的程序: 安全性:使用泛型可以使代码更加安全可靠,因为泛型提供了编译时的类型检查,使得编译器能够在编译阶段捕捉到类型错误. ...