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. jenkins的安装和配置(flask结合jenkins半自动化部署流程)

    jenkins在虚拟机中安装 1.1 背景介绍 Jenkins 是一款流行的开源持续集成(Continuous Integration)工具,广泛用于项目开发,具有自动化构建.测试和部署等功能. Je ...

  2. 2021-12-23:每日温度。 请根据每日 气温 列表 temperatures ,请计算在每一天需要等几天才会有更高的温度。如果气温在这之后都不会升高,请在该位置用 0 来代替。 示例 1: 输

    2021-12-23:每日温度. 请根据每日 气温 列表 temperatures ,请计算在每一天需要等几天才会有更高的温度.如果气温在这之后都不会升高,请在该位置用 0 来代替. 示例 1: 输入 ...

  3. defer有什么用呢

    1. 简介 本文将从一个资源回收问题引入,引出defer关键字,并对其进行基本介绍.接着,将详细介绍在资源回收.拦截和处理panic等相关场景下defer的使用. 进一步,介绍defer的执行顺序,以 ...

  4. linux 条件语句和逻辑判断

    目录 一.条件判断 二.逻辑判断 三.if和case 四.七个实验 一.条件判断 1.test测试 test [ 条件表达式 ] -e:测试目录是否存在 -d:测试是否为目录    -f:是否为文件 ...

  5. Python潮流周刊#3:PyPI 的安全问题

    你好,我是豌豆花下猫.这里记录每周值得分享的 Python 及通用技术内容,部分为英文,已在小标题注明.(标题取自其中一则分享,不代表全部内容都是该主题,特此声明.) 文章&教程 1.掌握Py ...

  6. R 语言 download.file 的几点知识

    R 语言中,不管是安装包,还是下载数据,很多时候都会用到download.file这个函数.如果你在安装包或者下载数据过程中出现中断,或者异常,想要判断是远程源服务器的问题,还是自身服务器的问题,还是 ...

  7. 为 Windows 系统替换优雅的苹果字体

    使用 Windows 的童鞋,大家估计都用惯了默认的微软雅黑字体,字体本身也很不错,但使用久了也该换个别的字体了,换个字体换个心情嘛. 今天给大家推荐一款非常棒的一键更换 Windows 系统字体的软 ...

  8. 一次 HPC 病毒感染与解决经历

    周一的时候,有同事反馈说,HPC 的项目报告路径正在不断产生 *.exe 和 *.pif 文件,怀疑是不是被病毒感染! 收到信息,第一时间进去目录,的确发现该目录每个几秒钟就自动生成一个 *.exe ...

  9. 白帽子讲web安全

    世界安全观 Web安全筒史 起初,研究计算机系统和网络的人,被称为"Hacker","Hacker"在中国按照音译,被称为"黑客" 对于现代 ...

  10. 一次Mybaits查询的源码分析

    很好奇Mybaits是怎么将xml和mapper对应起来的,用一段比较简单的demo去debug追踪一下源码看看 先用xml配置的方式,看懂了再去看注解的方式是怎么实现的 获取Mapper Mybai ...