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 ...
随机推荐
- C#异步有多少种实现方式?
前言 微信群里的一个提问引发的这个问题,C#异步有多少种实现方式?首先想要知道C#异步有多少中实现方式,首先我们要知道.NET提供的执行异步操作的三种模式,然后再去了解C#异步实现的方式. .NET异 ...
- 一种KV存储的GC优化实践
作者:vivo 互联网服务器团队- Yuan Jian Wei 从内部需求出发,我们基于TiKV设计了一款兼容Redis的KV存储.基于TiKV的数据存储机制,对于窗口数据的处理以及过期数据的GC问题 ...
- 在 CentOS 上搭建 Mumble 服务器
Mumble 服务器搭建 前言 Mumble 是一个开源.低延迟.高质量的语音通话平台.可以在多个平台搭建,并且有多个开源的客户端(Windows.Linux.Android.MacOS).这是 官网 ...
- 文心一言 VS chatgpt (13)-- 算法导论3.1 8题 3.2 1题
八.可以扩展我们的记号到有两个参数n和m的情形,其中的n和m可以按不同速率独立地趋于无穷.对于给定的函数g(n, m),用O(g(n, m))来表示以下函数集: O(g(n, m)) = 对Ω(g(n ...
- 文心一言 VS chatgpt (12)-- 算法导论3.1 6~7题
六.证明:一个算法的运行时间为θ(g(n))当且仅当其最坏情况运行时间为O(g(n)),且其最好情况运行时间为Ω(g(n)) . 文心一言: chatgpt: 要证明「一个算法的运行时间为θ(g(n) ...
- 2020-12-23:如何保证MQ的高可用?
福哥答案2020-12-23: ActiveMQ:Master-Slave 部署方式主从热备,方式包括通过共享存储目录来实现(shared filesystem Master-Slave).通过共享数 ...
- 2021-12-16:给定两个数a和b, 第1轮,把1选择给a或者b, 第2轮,把2选择给a或者b, ... 第i轮,把i选择给a或者b。 想让a和b的值一样大,请问至少需要多少轮? 来自字节跳动。
2021-12-16:给定两个数a和b, 第1轮,把1选择给a或者b, 第2轮,把2选择给a或者b, - 第i轮,把i选择给a或者b. 想让a和b的值一样大,请问至少需要多少轮? 来自字节跳动. 答案 ...
- 2021-08-21:给定一个数组arr,长度为N > 1,从中间切一刀,保证左部分和右部分都有数字,一共有N-1种切法,如此多的切法中,每一种都有:绝对值(左部分最大值 – 右部分最大值)。返回最大
2021-08-21:给定一个数组arr,长度为N > 1,从中间切一刀,保证左部分和右部分都有数字,一共有N-1种切法,如此多的切法中,每一种都有:绝对值(左部分最大值 – 右部分最大值).返 ...
- TokenObtainPairView
TokenObtainPairView是由Django REST framework的SimpleJWT库提供的视图.它用于生成JSON Web Token(JWT)
- Django context must be a dict rather than UserProfile.
context must be a dict rather than UserProfile. # 主页@login_requireddef index(request): data={} data ...