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. FreeSSL申请免费证书

    FreeSSL申请免费证书 FreeSSL 是一个免费证书和 SSL 证书管理平台.旨在为个人和小型企业提供免费 SSL 证书,以加强他们的网站和应用程序的安全性.与传统的 SSL 证书颁发机构不同, ...

  2. 万字长文详解如何使用Swift提高代码质量

    前言 京喜APP最早在2019年引入了Swift,使用Swift完成了第一个订单模块的开发.之后一年多我们持续在团队/公司内部推广和普及Swift,目前Swift已经支撑了70%+以上的业务.通过使用 ...

  3. 2022-10-10:以下go语言代码输出什么?A:[1 2 3 0 1 2];B:死循环;C:[1 2 3 1 2 3];D:[1 2 3]。 package main import “fmt“

    2022-10-10:以下go语言代码输出什么?A:[1 2 3 0 1 2]:B:死循环:C:[1 2 3 1 2 3]:D:[1 2 3]. package main import "f ...

  4. 2022-09-20:以下go语言代码输出什么?A:8 8;B:8 16;C:16 16;D:16 8。 package main import ( “unsafe“ “fmt“ )

    2022-09-20:以下go语言代码输出什么?A:8 8:B:8 16:C:16 16:D:16 8. package main import ( "unsafe" " ...

  5. 2021-01-08:cpu和gpu有什么区别?

    福哥答案2021-01-08:[答案来自此链接:](https://www.cnblogs.com/biglucky/p/4223565.html)Cache, local memory: CPU & ...

  6. 2021-02-18:给定一个字符串str,给定一个字符串类型的数组arr,出现的字符都是小写英文。arr每一个字符串,代表一张贴纸,你可以把单个字符剪开使用,目的是拼出str来。返回需要至少多少张贴纸可以完成这个任务。例子:str= "babac",arr = {"ba","c","abcd"}。a + ba + c 3 abcd + abcd 2 abcd+ba 2。所以返回2。

    2021-02-18:给定一个字符串str,给定一个字符串类型的数组arr,出现的字符都是小写英文.arr每一个字符串,代表一张贴纸,你可以把单个字符剪开使用,目的是拼出str来.返回需要至少多少张贴 ...

  7. 2022-03-14:一开始屏幕上什么也没有,粘贴板里什么也没有, 你只能在键盘上做如下4种操作中的1种: 输入:在屏幕上已经显示内容的后面加一个A, 全选:把屏幕上已经显示的全部内容选中, 复制:被

    2022-03-14:一开始屏幕上什么也没有,粘贴板里什么也没有, 你只能在键盘上做如下4种操作中的1种: 输入:在屏幕上已经显示内容的后面加一个A, 全选:把屏幕上已经显示的全部内容选中, 复制:被 ...

  8. 2021-09-12:请你来实现一个 myAtoi(string s) 函数,使其能将字符串转换成一个 32 位有符号整数(类似 C/C++ 中的 atoi 函数)。函数 myAtoi(string

    2021-09-12:请你来实现一个 myAtoi(string s) 函数,使其能将字符串转换成一个 32 位有符号整数(类似 C/C++ 中的 atoi 函数).函数 myAtoi(string ...

  9. idea 查看scala源代码

    使用idea编写spark程序,想要查看源代码,点进去是compiled code private[sql] def this(sc : org.apache.spark.SparkContext) ...

  10. ChatGPT之问艺道:如何借助神级算法Prompt,让你轻松get到更高质量答案?

    摘要:本文由葡萄城技术团队编写,文章的内容借鉴于Ibrahim John的<The Art of Asking ChatGPT>(向ChatGPT提问的艺术). 前言 当今,ChatGPT ...