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. Weblogic11g安装部署-winserver篇

    目录 一.安装weblogic11g 1.1找到下载好的weblogic11g 1.2打开安装程序wls1033_oepe111150_win32.exe,并完成初始化如下图 1.3点击下一步并选择安 ...

  2. Python数据分析中 melt()函数的一些用法

    melt()函数是一个数据重塑工具,用于将宽格式数据转换为长格式数据(Unpivot a DataFrame from wide to long format, optionally leaving ...

  3. 【Python基础】字符串的基本使用

    b6f9d807-edb2-4e0a-b554-fae322343bee 字符串是Python中最基本的数据类型之一.它是由一系列字符组成的不可变序列.这意味着一旦创建了一个字符串,就不能直接修改它的 ...

  4. 从原理到应用,人人都懂的ChatGPT指南

    作者:京东科技 何雨航 引言 如何充分发挥ChatGPT潜能,已是众多企业关注的焦点.但是,这种变化对员工来说未必是好事情.IBM计划用AI替代7800个工作岗位,游戏公司使用MidJourney削减 ...

  5. 2021-02-09:如何删除一个链表的倒数第n个元素?

    2021-02-09:如何删除一个链表的倒数第n个元素? 福哥答案2021-02-09: 1.创建虚拟头元素,虚拟头元素的Next指针指向头元素.2.根据快慢指针求倒数第n+1个元素,假设这个元素是s ...

  6. Nacos必知必会:这些知识点你一定要掌握!

    前言 Nacos 是一个开源的服务发现.配置管理和服务治理平台,是阿里巴巴开源的一款产品. Nacos 可以帮助开发者更好地管理微服务架构中的服务注册.配置和发现等问题,提高系统的可靠性和可维护性. ...

  7. 代码随想录算法训练营Day16二叉树|104.二叉树的最大深度 559.n叉树的最大深度 111.二叉树的最小深度  222.完全二叉树的节点个数

    代码随想录算法训练营 代码随想录算法训练营Day16二叉树|104.二叉树的最大深度 559.n叉树的最大深度 111.二叉树的最小深度  222.完全二叉树的节点个数 104.二叉树的最大深度 题目 ...

  8. 从 Blast2GO 本地化聊一聊 Linux 下 MySQL 的源码安装

    Blast2GO 是一个基于序列相似性搜索的 GO 注释和功能分析工具,它可以直接统计分析基因功能信息,并可视化 GO 有向非循环图(DAG)上的相关功能特征,分析 BLAST.GO-mapping. ...

  9. [Java SE] 彻底搞懂Java程序的三大参数配置途径:系统变量与JVM参数(VM Option)/环境变量/启动程序参数args

    0 序言 一次没搞懂,处处受影响.这个问题属于基础问题,但又经常踩坑,不得不重视一下了. 1 Java程序动态参数的配置途径:系统变量与JVM参数(VM Option) vs 环境变量 vs 启动程序 ...

  10. dpkg 安装mysql

    名称 版本 系统 Ubuntu 16.04 MySQL 5.7.26 下载安装包 wget https://dev.mysql.com/get/Downloads/MySQL-8.mysql-serv ...