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. 讯飞星火大模型 与New Bing实测对比

    昨天科大讯飞发布了讯飞星火认知大模型,在发布会现场实测大模型的7种核心能力,并发布了它在教育.办公.汽车.数字员工领域的应用成果.科大讯飞董事长刘庆峰表示:认知大模型展示了通用人工智能的曙光,讯飞星火 ...

  2. SqliLabs 第二关 ,数字型注入!!!

    首先打开网页,进行注入点的测试 输入?id=1 and 1=1发现1=2的时候出现了报错,说明服务器接收了我们的指令,并且进行了反馈,说明了有注入点的存在,然后对注入点进行测试 然后输入order b ...

  3. 在Bamboo上怎么使用iOS的单元测试

    作者:京东零售 吴滔 本教程将使用北汽登录模块为例,一步一步和大家一起搭建单元测试用例,并在Bamboo上跑起来,最终测试结果和代码覆盖率会Bamboo上汇总. 模块名称:BQLoginModule, ...

  4. 2022-04-25:给定一个整数数组,返回所有数对之间的第 k 个最小距离。一对 (A, B) 的距离被定义为 A 和 B 之间的绝对差值。 输入: nums = [1,3,1] k = 1 输出:

    2022-04-25:给定一个整数数组,返回所有数对之间的第 k 个最小距离.一对 (A, B) 的距离被定义为 A 和 B 之间的绝对差值. 输入: nums = [1,3,1] k = 1 输出: ...

  5. json函数

    Python与JSON(load.loads.dump.dumps)   1.Python中加载JSON 使用loads(string):作用将string类型转为dict字典或dict链表 # 加载 ...

  6. python爬虫防止IP被封的一些措施(转)

    python爬虫防止IP被封的一些措施(转) 在编写爬虫爬取数据的时候,因为很多网站都有反爬虫措施,所以很容易被封IP,就不能继续爬了.在爬取大数据量的数据时更是瑟瑟发抖,时刻担心着下一秒IP可能就被 ...

  7. 7-8 估值一亿的AI核心代码

    题目描述: 以上图片来自新浪微博. 本题要求你实现一个稍微更值钱一点的 AI 英文问答程序,规则是: 无论用户说什么,首先把对方说的话在一行中原样打印出来: 消除原文中多余空格:把相邻单词间的多个空格 ...

  8. 小程序提交POST请求,出现405错误

    status": 405, "error": "Method Not Allowed", "message": "Req ...

  9. 【Haxe】(一)VSCode 搭建 Haxe 开发环境

    前言 咱换工作啦! 新工作这边需要用到的开发语言是 Haxe,最近大概会写几篇笔记.Haxe 的介绍就不写了,打算记录点有用的学习内容,先从搭建开发环境开始吧! 当前适用版本: VSCode:Curr ...

  10. Java(命令行传参、可变参数、递归

    1.命令行传参 通过命令行传参,main也可以传参 public class Hello { public static void main(String[] args) { for (int i = ...