ES6-8 - 函数名/对象拓展、描述符、getter/setter

函数名

有两种特殊情况：bind方法创造的函数，name属性返回bound加上原函数的名字；Function构造函数创造的函数，name属性返回anonymous。

  • bind函数名
// 以bound开头
function foo() { }
const fnName = foo.bind().name
console.log(fnName) // bound foo
  • getter setter

如果对象的方法使用了取值函数（getter）和存值函数（setter），则name属性不是在该方法上面，而是该方法的属性的描述对象的get和set属性上面，返回值是方法名前加上get和set。

const obj = {get foo() {},set foo(x) {}
};obj.foo.name
// TypeError: Cannot read property 'name' of undefinedconst descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');descriptor.get.name // "get foo"
descriptor.set.name // "set foo"

对象方法的简写

const o = {method() {return "Hello!";}
};
  • node common.js写法+
    在这里插入图片描述

在这里插入图片描述

属性名表达式

ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。

let propKey = 'foo';let obj = {[propKey]: true,['a' + 'bc']: 123
};

let obj = {['h' + 'ello']() {return 'hi';}
};obj.hello() // hi
  • 属性名可以重复，重复则覆盖
let b = 'b'
let obj = {['a' + 'b'] : undefined,['a' + b] : 1, // 属性名和上面重复，永远取最后的，obj最后依然只有一个键‘ab’
}

属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object Object]，这一点要特别小心。

const keyA = {a: 1};
const keyB = {b: 2};const myObject = {[keyA]: 'valueA',[keyB]: 'valueB'
};myObject // Object {[object Object]: "valueB"}
// 1. 属性名相同覆盖
// 2. 将一切js变量转为字符串，作为属性名
  1. 一个对象的属性名可以是任何有效的 JavaScript 字符串，或者可以被转换为字符串的任何类型，包括空字符串。然而，一个属性的名称如果不是一个有效的 JavaScript 标识符（例如，一个由空格或连字符，或者以数字开头的属性名），就只能通过方括号标记访问。这个标记法在属性名称是动态判定（属性名只有到运行时才能判定）时非常有用。
  2. JavaScript中的对象只能使用String类型作为键类型。

属性描述符

  • getOwnPropertyDescriptor是构造器上的方法
  • 方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）若无返回undefined
  • Object.getOwnPropertyDescriptor(obj, prop)
    在这里插入图片描述

一个属性描述符是一个记录，由下面属性当中的某些组成的：

  1. value
    该属性的值(仅针对数据属性描述符有效)
  2. writable
    当且仅当属性的值可以被改变时为true。(仅针对数据属性描述有效)
    重新赋值，不包括删除！
  3. get
    获取该属性的访问器函数（getter）。如果没有访问器， 该值为undefined。(仅针对包含访问器或设置器的属性描述有效)
  4. set
    获取该属性的设置器函数（setter）。 如果没有设置器， 该值为undefined。(仅针对包含访问器或设置器的属性描述有效)
  5. configurable
    当且仅当指定对象的属性描述可以被改变或者属性可被删除时，为true。
    delete obj.a
  6. enumerable
    当且仅当指定对象的属性可以被枚举出时，为 true。
Object.defineProperty(o, "baz", {value: 8675309,writable: false, // 重写baz属性会静默失败；而严格模式重写则报错enumerable: false
});
  • 注意：在 ES5 中，如果该方法的第一个参数不是对象（而是原始类型），那么就会产生出现 TypeError。而在 ES2015，第一个的参数不是对象的话就会被强制转换为对象。
Object.getOwnPropertyDescriptor('foo', 0);
// 类型错误: "foo" 不是一个对象  // ES5 codeObject.getOwnPropertyDescriptor('foo', 0);
// Object returned by ES2015 code: {
//   configurable: false,
//   enumerable: true,
//   value: "f",
//   writable: false
// }

getter、setter在对象上

使用Object.defineProperties的方法，同样也可以对一个已创建的对象在任何时候为其添加getter或setter方法。这个方法的第一个参数是你想定义getter或setter方法的对象，第二个参数是一个对象，这个对象的属性名用作getter或setter的名字，属性名对应的属性值用作定义getter或setter方法的函数。

  • set必须要有参数，否则报错Uncaught SyntaxError: Setter must have exactly one formal parameter.
var o = {a: 7,get b() { return this.a + 1;},set c(x) {this.a = x / 2}
};console.log(o.a); // 7 
console.log(o.b); // 8 注意访问方式 get直接读
o.c = 50; // set要赋值
console.log(o.a); // 25

var language = {set add(name){this.ln.push(name)},ln: []
}
language.add = 'EN'
language.add = 'FN'
console.log(language.ln) // ["EN","FN"]

mdn getter
mdn setter

在这里插入图片描述

  • a也是o的属性，只是用getter、setter劫持了
  • 如果getter和属性重名，会报错 Uncaught RangeError: Maximum call stack size exceeded

不可能同时将一个 getter 绑定到一个属性并且该属性实际上具有一个值。
使用get语法时，不能与另一个 get 或具有相同属性的数据条目同时出现在一个对象字面量中。
不允许使用 { get x() { }, get x() { } } 和 { x: …, get x() { } }）。
在对象字面量中，不能为一个已有真实值的变量使用 set ，也不能为一个属性设置多个 set。
( { set x(v) { }, set x(v) { } } 和 { x: …, set x(v) { } } 是不允许的 )

var o = {_a: 7,get a() { return this._a + 1;},set a(x) {this._a = x / 2}
};console.log(o.a); // 8
o.a = 10
console.log(o.a); // 6
console.log(Object.keys(o)) // ["_a","a"]

在这里插入图片描述

  • Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #<Object>
var obj = {get a(){return 2}
}
// 注意：这里也不能再为已有的对象属性，使用defineProperty
Object.defineProperty(obj, 'b', {get: function(){return this.a + 100},// value: 2 写了get不能再写value/writable，否则报错
})
console.log(obj.a) // 2
console.log(obj.b) // 102
  • get和set一般是成对出现的，并且不应写死，不然没有意义

getter/setter → 伪属性

  • Object.defineProperty与创建对象时定义getter/setter的区别
  • Object.defineProperty的getter/setter/其余普通属性不可枚举、不可配置
const obj = {a: 2
}
Object.defineProperty(obj, 'b', {set: function (x) {this.a = x}
})
const res = Object.getOwnPropertyDescriptor(obj, 'b')
console.log(res)
console.log(Object.keys(obj))const obj2 = {_a: 2,get a() {return this._a},set a(val) {this._a = val}
}
const res2 = Object.getOwnPropertyDescriptor(obj2, 'a')
console.log(res2)
console.log(res2.get.name) // get a
console.log(res2.set.name) // set a
console.log(Object.keys(obj2))

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/251021.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

javascript --- 再识闭包

javascript --- 再识闭包

看下面一个例子: function zipCode(code, location) {let _code code;let _location location || ;return {code: function () {return _code;},location: function() {return _location;}} }再上述封闭的函数中,code的匿名函数根据作用域链可以访问到外面的_code变量. con…
阅读更多...
ES6-9 对象密封4种方式、assign、取值函数的拷贝

ES6-9 对象密封4种方式、assign、取值函数的拷贝

一 对象密封 1 Object.preventExtensions 禁止对象拓展&#xff0c;仍可删除 严格模式下报错 const origin {a: 1 } const fixed Object.preventExtensions(origin) console.log(origin fixed) // true console.log(Object.isExtensible(origin)) // false 不可拓展 orig…
阅读更多...
javascript --- 使用ajax与服务器进行通信

javascript --- 使用ajax与服务器进行通信

Ajax: (Asynchronous JavaScript and XML,异步JavaScript与XML技术)是一种有效利用JavaScript和DOM的操作. 与传统HTTP请求的区别: Ajax允许只更新页面的一部分,因此减少了响应中传输的数据量 Ajax的API: Ajax与服务器进行通信,可以使用JavaScript中原生的XMLHttpRequest对象…
阅读更多...
ES6-10 super、4种遍历方式、原型、symbol遍历

ES6-10 super、4种遍历方式、原型、symbol遍历

由于现代 JavaScript 引擎优化属性访问所带来的特性的关系&#xff0c;更改对象的 [[Prototype]]即__proto__在各个浏览器和 JavaScript 引擎上都是一个很慢的操作。 一 Object原型方法 1 Object.setPrototypeOf(obj, proto) 用该方法而不是直接修改__proto__返回值是设置好原…
阅读更多...
IntelliJ IDEA使用

IntelliJ IDEA使用

1&#xff1a;下载 ideaIU-2017.2.exe&#xff0c;JetbrainsCrack-2.6.2.jar(补丁) 2&#xff1a;安装ideaIU-2017.2.exe&#xff0c;将补丁放在D:\java\intellij\IntelliJ IDEA 2017.2\bin 目录下 3&#xff1a;在安装的idea下面的bin目录下面有2个文件 &#xff1a; 一个是id…
阅读更多...
js中如何删除json对象的某一个选项

js中如何删除json对象的某一个选项

我有一个这样一个对象&#xff0c;getData, 但是我不想要每一项的id&#xff0c;那怎么去删除呢(使用delete)? getData.map((item) >{delete item["id"];});console.log(getData);转载于:https://www.cnblogs.com/mmykdbc/p/8386407.html
阅读更多...
ES6-11 Symbol、iterator、forOf、typeArray

ES6-11 Symbol、iterator、forOf、typeArray

…剩余运算符 const obj1 {a: 1,b: 2 } const obj2 {a: 100,b: 2,c: 300 } const obj {...obj1,...obj2 } console.log(obj) // 和Object.assign(obj, obj1, obj2)结果相同[Symbol.hasInstance] Symbol构造函数上的属性&#xff0c;默认调用了方法 iterator迭代器 对数…
阅读更多...
node --- 游走在客户端和服务器间的http

node --- 游走在客户端和服务器间的http

本篇文章,讲述了一个很简单的上传图片(/start)到本地服务器,然后路由跳转到/upload. 写这个程序的目的是为了帮助理解HTTP的一些基本概念及node对于http api的实现以及程序的设计模式. IP: 计算机之间的通信 TCP: 应用程序之间的通信 HTTP: 基于TCP实现的应用层协议,设计之初是…
阅读更多...
redis配置环境变量

redis配置环境变量

直接上图不解释 redis安装路径&#xff0c;我的电脑右击属性 窗口R键&#xff0c;输入cmd回车&#xff0c;输入redis-server.exe 回车 再开一个命令窗口&#xff0c;窗口R键&#xff0c;输入cmd回车&#xff0c;输入 redis-cli.exe -h 127.0.0.1 -p 6379 回车 转载于:https:/…
阅读更多...
对转义字符的思考

对转义字符的思考

ASCII码 计算机存储文字时用的是二进制&#xff0c;ASCII码就是一张对照表&#xff0c;什么字符对应什么码&#xff0c;将二进制码存储下来0-127位表示基础的ASCII码0-31&#xff0c;和127表示非打印控制字符&#xff08;如换行、回车、响铃、文头、文尾&#xff09;32-126表示…
阅读更多...
ES6-12 array/数值拓展、ArrayOf、ArrayFrom

ES6-12 array/数值拓展、ArrayOf、ArrayFrom

要使用…须有迭代器接口 数组方法 构造器上的方法 Array.of()声明数组 替代new Array()的方式声明数组new Array()不传参数返回空数组&#xff0c;只传1个参数时&#xff0c;代表数组长度&#xff0c;内容用empty填充&#xff0c;传多个参数&#xff0c;则代表数组内容&…
阅读更多...
React01

React01

目录 React-day01 入门知识React介绍官网React开发环境初始化 SPA脚手架初始化项目&#xff08;方便&#xff0c;稳定&#xff09;*通过webpack进行初始化配置镜像地址开发工具配置元素渲染组件及组件状态函数定义组件(无状态)类定义组件(有状态)*组合组件Props属性*State状态*…
阅读更多...
算法 --- 反转数组

算法 --- 反转数组

几个注意点: 1.输出的时候,也要做数字超出处理 2.js中可以使用 str -0 将字符串类型转换成数字类型 ( 注意不是 0) 3.可以使用 num ‘’ 将数字类型转换成字符串类型 4.使用str.split(’’) 可以将字符串转换成数组 5.使用arr.join(’’) 可以将数组转换成字符串 6.JS中2的31次…
阅读更多...
ES6-13 正则方法、修饰符yus、UTF_16编码方式

ES6-13 正则方法、修饰符yus、UTF_16编码方式

修饰符 m multiLine 对于str中含\n的情况g globali ignoreCase 元字符 反斜杠加转义 元字符含义简写\w匹配字母、数字、下划线。等价于’[A-Za-z0-9_]’。word\W匹配非字母、数字、下划线。等价于 ‘[^A-Za-z0-9_]’。\s匹配任何空白字符&#xff0c;包括空格、制表符、换页…
阅读更多...
cmd窗口快速定位到具体文件夹方法

cmd窗口快速定位到具体文件夹方法

在用Python进行机器实战时&#xff0c;打开cmd窗口后&#xff0c;总是到定位到kNN.py所在文件夹才能Python&#xff08;否则import kNN失败&#xff09;&#xff0c;每次都要输入地址非常麻烦 这里介绍一个cmd窗口快速定位到具体文件夹方法&#xff1a; 按住Shift键右击鼠标打开…
阅读更多...
算法 --- 罗马数字转整数

算法 --- 罗马数字转整数

解体思路: 1.写一个对象trans用于保存罗马和数字之间的映射关系 2.重点在于当数值小的出现在数值大的左边时,会减去该数,出现在右边时会加上该数,因此需要与后面的进行比较 3.在得到s时,首先给它转换成字符串,并在末位加一个0 /*** param {string} s* return {number}*/ var r…
阅读更多...
正则 - 阮一峰

正则 - 阮一峰

学习地址 一 正则实例方法 1. test 正则实例.test返回布尔值 var r /x/g; var s _x_x;r.lastIndex // 0 r.test(s) // truer.lastIndex // 2 r.test(s) // truer.lastIndex // 4 r.test(s) // false死循环&#xff0c;因为while循环的每次匹配条件都是一个新的正则表达式…
阅读更多...
算法 --- 有效的括号

算法 --- 有效的括号

解题思路: 1.对括号分别赋值(左括号大于0,右括号小于0),方便后期比较 2.使用栈,对于大于0的字符串入栈,对于小于0的字符串,检查栈中是否有元素,若没有返回false,否则拿出栈顶的一个元素,和现在的元素进行比较 /** * param {string} s * return {boolean} */ var isValid func…
阅读更多...
ES6-14 Unicode表示法、字符串方法、模板字符串

ES6-14 Unicode表示法、字符串方法、模板字符串

Unicode表示法 本身能正常识别的&#xff0c;加{}也能识别&#xff0c;花括号内的内容表示码点 parseInt(0061,16) // 十进制的97&#xff0c;97在ASCII码中对应a console.log(\u0061) // a console.log(\u{0061}) // a console.log(\u{61}) // a原型上方法 codePointAt(十进…
阅读更多...
算法 --- 删除数组中重复项

算法 --- 删除数组中重复项

解题思路: 如果输入的数组长度为1,则返回该数组否则(len>2),使用i记录当前待插入的位置,j记录下一个与nums[i]不相等的位置,leng为待返回数组的长度当nums[i] ! nums[j]时,把j位置的值nums[j]放在i1位置.同时i,j /*** param {number[]} nums* return {number}*/ var remov…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023