你不容错过的JavaScript高级语法(二)

简介: 你不容错过的JavaScript高级语法(二)

众所周知,js在前端开发中的地位。学好它,真的很重要。


属性描述符


对象属性通常都是直接定义在对象内部,或者直接添加到对象内部的。但是这样来做的时候我们就不能对这个属性进行一些限制:比如这个属性是否是可以通过delete删除的?这个属性是否在for-in遍历的时候被遍历出来呢?


如果我们想要对一个属性进行比较精准的操作控制,那么我们就可以使用属性描述符。通过属性描述符可以精准的添加或修改对象的属性。属性描述符需要使用 Object.defineProperty 来对属性进行添加或者修改。


下面就来介绍一下Object.defineProperty


Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。


可接收三个参数:


  • obj要定义属性的对象;


  • prop要定义或修改的属性的名称或 Symbol;


  • descriptor要定义或修改的属性描述符; 返回值:被传递给函数的对象。


属性描述符的分类


网络异常,图片无法展示
|


属性描述符的类型有两种:


  • 数据属性(Data Properties)描述符(Descriptor)。


  • [[Configurable]]:表示属性是否可以通过delete删除属性,是否可以修改它的特性(configurable, value -> set/get, Enumerable),或者是否可以将它修改为存取属性描述符。当我们直接在一个对象上定义某个属性时,这个属性的[[Configurable]]为true。当我们通过属性描述符定义一个属性时,这个属性的[[Configurable]]默认为false。


  • [[Enumerable]]:表示属性是否可以通过for-in或者Object.keys()返回该属性。当我们直接在一个对象上定义某个属性时,这个属性的[[Enumerable]]为true。当我们通过属性描述符定义一个属性时,这个属性的[[Enumerable]]默认为false。


  • [[Writable]]:表示是否可以修改属性的值。当我们直接在一个对象上定义某个属性时,这个属性的[[Writable]]为true。当我们通过属性描述符定义一个属性时,这个属性的[[Writable]]默认为false。


  • [[value]]:属性的value值,读取属性时会返回该值,修改属性时,会对其进行修改。默认情况下这个值是undefined。


  • 存取属性(Accessor访问器 Properties)描述符(Descriptor)。


  • [[Configurable]]:表示属性是否可以通过delete删除属性,是否可以修改它的特性,或者是否可以将它修改为存取属性描述符, 和数据属性描述符是一致的。当我们直接在一个对象上定义某个属性时,这个属性的[[Configurable]]为true。当我们通过属性描述符定义一个属性时,这个属性的[[Configurable]]默认为false;


  • [[Enumerable]]:表示属性是否可以通过for-in或者Object.keys()返回该属性, 和数据属性描述符是一致的。当我们直接在一个对象上定义某个属性时,这个属性的[[Enumerable]]为true。当我们通过属性描述符定义一个属性时,这个属性的[[Enumerable]]默认为false。


  • [[get]]:获取属性时会执行的函数。默认为undefined


  • [[set]]:设置属性时会执行的函数。默认为undefined 存取描述符常用的作用?


  • 隐藏某一个私有属性被希望直接被外界使用和赋值。


var obj = {
      _address: "北京市"
    }
    Object.defineProperty(obj, "address", {
      enumerable: true,
      configurable: true,
      get: function() {
        return this._address
      },
      set: function(value) {
        this._address = value
      }
    })


  • 如果我们希望截获某一个属性它访问和设置值的过程时, 也会使用存储属性描述符。 对于对象字面量定义的属性他们的属性描述符默认值都是true


其他的对象方法


获取对象的属性描述符:


  • getOwnPropertyDescriptor


  • getOwnPropertyDescriptors


禁止对象添加新属性:preventExtensions


  • 给一个对象添加新的属性会失败(在严格模式下会报错);


  • 只能约束第一层属性


密封对象,不允许配置和删除属性:seal


  • 实际是调用preventExtensions


  • 并且将现有属性的configurable:false


  • 所以对象属性还是可以修改的


  • 只能约束第一层属性


冻结对象,不允许修改现有属性: freeze


  • 实际上是调用seal


  • 并且将现有属性的writable: false


  • 只能约束第一层的属性


类的多种继承方式


类的多种继承方式


下面一张图带你理解原型链继承关系


网络异常,图片无法展示
|


es6中的class


基础语法就不多说了,大家应该都很熟悉了。只说一下注意点。


  • class中书写的任何表达式形式的变量或者方法都是属于创建的对象本身。


  • class书写的方法是属于改构造函数的原型对象


class Person {
          // 表达式形式的函数,他直接定义在创建的对象上,而不是定义在构造函数的原型上。
          name='zh'
          say=() => {
            console.log("say")
          }
          // 这个方法在Person的原型上
          play() {
            console.log("play")
          }
     }
     console.log(Object.getOwnPropertyDescriptors(new Person()))
     console.log(new Person())
     console.log(Object.getOwnPropertyDescriptors(Person.prototype))


网络异常,图片无法展示
|


  • 在实现类的继承时,当在子类的构造函数中使用this之前或者返回对象时,一定要调用super方法。此时super表示父类构造函数。


  • super也可以调用父类的静态和实例方法。


相关文章
|
3月前
|
存储 JavaScript 前端开发
Node.js的基本语法
【8月更文挑战第12天】Node.js的基本语法
128 1
|
1月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
1月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
18 0
|
3月前
|
JavaScript 前端开发
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
这篇文章是JavaScript基础与实战教程的第一部分,涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换,通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
|
3月前
|
前端开发 JavaScript 程序员
前端 JavaScript 的 _ 语法是个什么鬼?
前端 JavaScript 的 _ 语法是个什么鬼?
|
4月前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
143 4
|
4月前
|
前端开发 JavaScript
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
593 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
97 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
129 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
82 4
下一篇
无影云桌面