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面向对象编程,你需要知道这些的更多相关文章

  1. 带你一分钟理解闭包--js面向对象编程

    上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...

  2. Js面向对象编程

    Js面向对象编程 1.     什么是面向对象编程? 我也不说不清楚什么是面向对象,反正就那么回事吧. 编程有时候是一件很快乐的事,写一些小游戏,用编程的方式玩游戏等等 2.     Js如何定义一个 ...

  3. js原生设计模式——3简单工厂模式\js面向对象编程实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. JS面向对象编程(进阶理解)

    JS 面向对象编程 如何创建JS对象 JSON语法声明对象(直接量声明对象) var obj = {}; 使用 Object 创建对象 var obj = new Object(); JS对象可以后期 ...

  5. 页面循环绑定(变量污染问题),js面向对象编程(对象属性增删改查),js字符串操作,js数组操作

    页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...

  6. js面向对象编程 ---- 系列教程

    原 js面向对象编程:数据的缓存 原 js面向对象编程:如何检测对象类型 原 js面向对象编程:if中可以使用那些作为判断条件呢? 原 js面向对象编程:this到底代表什么?第二篇 原 js面向对象 ...

  7. 简单粗暴地理解js原型链–js面向对象编程

    简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...

  8. JS面向对象编程,对象,属性,方法。

    document.write('<script type="text/javascript" src="http://api.map.baidu.com/api?v ...

  9. js面向对象编程(第2版)——js继承多种方式

    附带书籍地址: js面向对象编程(第2版)

  10. 原生js面向对象编程-选项卡(自动轮播)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. 今日分享:目前目标责任成本明细单价已设置,机构参数设置-物资合同单价超目标责任成本明细单价Y%时不能保存,该参数已设置但未生效是为什么?

    在编制的时候-"材料类别设置"中,不勾选"管控".

  2. 2022-11-15:这里有 n 个航班,它们分别从 1 到 n 进行编号。 有一份航班预订表 bookings , 表中第 i 条预订记录 bookings[i] = [firsti, lasti,

    2022-11-15:这里有 n 个航班,它们分别从 1 到 n 进行编号. 有一份航班预订表 bookings , 表中第 i 条预订记录 bookings[i] = [firsti, lasti, ...

  3. 2022-08-14:k8s安装PostgreSQL,yaml如何写?

    2022-08-14:k8s安装PostgreSQL,yaml如何写? 答案2022-08-14: yaml如下: apiVersion: apps/v1 kind: Deployment metad ...

  4. 2021-11-22:给定一个正数数组arr,表示每个小朋友的得分; 任何两个相邻的小朋友,如果得分一样,怎么分糖果无所谓,但如果得分不一样,分数大的一定要比分数少的多拿一些糖果; 假设所有的小朋友坐

    2021-11-22:给定一个正数数组arr,表示每个小朋友的得分: 任何两个相邻的小朋友,如果得分一样,怎么分糖果无所谓,但如果得分不一样,分数大的一定要比分数少的多拿一些糖果: 假设所有的小朋友坐 ...

  5. @csrf_exempt

    在Django中对于基于函数的视图我们可以 @csrf_exempt 注解来标识一个视图可以被跨域访问.那么对于基于类的视图,我们应该怎么办呢? 简单来说可以有两种访问来解决 方法一:在类的 disp ...

  6. 7-8 切分表达式——写个tokenizer吧 (20 分)

    1.题目描述: [先说点出题背景] 这个题是为低年级同学.学C语言的同学准备的,因为,对这部分同学,这个题目编写起来略有一点复杂.如果是高年级.学过了正则表达式(Regular Expression) ...

  7. U3DFrameWorkDemo:二、资源管理

    代码参考 代码文件参考下述详解的类图,工程参考第零章工程说明 概述 在游戏项目中有很多资产如:预制体,图片,音频,Lua脚本,Shader等等.他们随打包放在用户的硬盘里.在游戏的运行过程中,需要对这 ...

  8. 【Python入门教程】获取图片可视化精准定位(逆地理编码)

    ​ 使用exifread库读取图片的经纬度信息(WGS84坐标) 使用高德开放API将经纬度转为高德底图经纬度,并输出具体位置 使用folium库,以高德底图为基准,在网页上可视化显示地图和兴趣点 一 ...

  9. 你是怎么学习 Java 技术的?

    一.Java 语言 Java 语言不只是一门语言. Java 学习不是一蹴而就就可以达成的,它是一个循序渐进,由浅入深,由表及里的过程.尤其需要注意的是不能有浅尝辄耻,不求甚解的态度.每个地方只抓一点 ...

  10. Mybatis的parameterType造成线程阻塞问题分析

    一.前言 最近在新发布某个项目上线时,每次重启都会收到机器的 CPU 使用率告警,查看对应监控,持续时长达 5 分钟,对于服务重启有很大风险.而该项目有非常多 Consumer 消费,服务启动后会有大 ...