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 ...
随机推荐
- spring xml配置中引用java配置不能用ClassPathXmlApplicationContext
现在的目的是想测试在xml配置中引用java配置的bean CD唱片的接口: package v4.c2; public interface CompactDisc { void play(); } ...
- React Hooks方法
1.useState import React, { useState } from "react"; /* 目标: 掌握useState的使用 作用:实现响应式数据的 用法:引入 ...
- 2023-03-16:给定一个由 0 和 1 组成的数组 arr ,将数组分成 3 个非空的部分, 使得所有这些部分表示相同的二进制值。 如果可以做到,请返回任何 [i, j],其中 i+1 < j
2023-03-16:给定一个由 0 和 1 组成的数组 arr ,将数组分成 3 个非空的部分, 使得所有这些部分表示相同的二进制值. 如果可以做到,请返回任何 [i, j],其中 i+1 < ...
- 2022-09-24:以下go语言代码输出什么?A:1;B:3;C:13;D:7。 package main import ( “fmt“ “io/ioutil“ “net/
2022-09-24:以下go语言代码输出什么?A:1:B:3:C:13:D:7. package main import ( "fmt" "io/ioutil" ...
- 源端为备库的场景下Duplicate失败问题
环境: Oracle 11.2.0.3 + OEL 7.9 A -> B -> C 级联ADG环境:db11g -> db11gadg -> db11gcas 之前测试提到,从 ...
- kafka生产者你不得不知的那些事儿
前言 kafka生产者作为消息发送中很重要的一环,这里面可是大有文章,你知道生产者消息发送的流程吗?知道消息是如何发往哪个分区的吗?如何保证生产者消息的可靠性吗?如何保证消息发送的顺序吗?如果对于这些 ...
- vue cli3 整合Cesium,处理build 时内存溢出问题
一直使用cesium,但是都是使用script直接引入的,但是在将其放置在增加路由的子页面中中时会出现一个问题,刷新后提示cesium is undefined 看直接引入cesium.js < ...
- 曲线艺术编程 coding curves 第二章 三角函数曲线(TRIG CURVES)
第二章 三角函数曲线(TRIG CURVES) 原作:Keith Peters 原文:https://www.bit-101.com/blog/2022/11/coding-curves/ 译者:池中 ...
- 一分钟学一个 Linux 命令 - mv 和 cp
前言 大家好,我是god23bin.欢迎来到<一分钟学一个 Linux 命令>系列,今天需要你花两分钟时间来学习下,因为今天要讲的是两个命令,mv 和 cp 命令. mv 什么是 mv 命 ...
- 自研ORM嵌套查询和子查询,强不强大您说了算。
测试代码 var count = 0; var refAsync = new RefAsync<int>(); //下面示例方法的重载均支持 var query = db.Query< ...