9.（ECMAScript）es6完全解读（8）

最新推荐文章于 2021-02-18 16:52:24 发布
最新推荐文章于 2021-02-18 16:52:24 发布
阅读量216 收藏
点赞数
分类专栏： # ECMScript 文章标签： es5 es6 js 对比差异 代理 proxy 拦截器 小结 反射 Reflect 常用方法 defineProperty Object 好处 作用 使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013946061/article/details/113824727
版权

文章目录

1. 重点提炼

  • 代理的使用与探究
  • 反射Reflect

2. 代理Proxy

  • 代理
  • 常用拦截方法

相当于对象的set、get，拦截获取和设置操作。

es5代理 => Object.defineProperty

// ES5
let obj = {}
let newVal = '123456'
Object.defineProperty(obj, 'name', {
    get(){
        console.log('get')
        return newVal
    },
    set(val){
        console.log('set')
        // this.name = val 会造成死递归，内存溢出
        newVal = val
    }
})
obj.name = 'es'
console.log(obj.name)

但是注意set的时候不可以直接使用this.name = val，会造成死递归，内存溢出

image-20201125103612757

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a2.73
Branch： branch02

commit description：a2.73（代理Proxy——es5代理 => Object.defineProperty）

tag：a2.73


在 ES6 标准中新增的一个非常强大的功能是 Proxy，它可以自定义一些常用行为如查找、赋值、枚举、函数调用等。通过 Proxy这个名称也可以看出来它包含了“代理”的含义，只要有“代理”的诉求都可以考虑使用 Proxy来实现。

let p = new Proxy(target, handler)
参数含义必选
target用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）Y
handler一个对象，其属性是当执行一个操作时定义代理的行为的函数Y

Proxy对应两个参数，第一个是需要拦截的对象，第二个是配置参数，对应钩子函数。

如果给Proxy对象绑定了拦截对象，那么对该Proxy对象的操作，同样就会传递给拦截对象了。

MDN给出的解释偏官方，通俗的讲第一个参数 target就是用来代理的“对象”，被代理之后它是不能直接被访问的，而 handler 就是实现代理的过程。

// proxy
let obj = {}
let p = new Proxy(obj, {})
p.name = 'lisi'
console.log(obj.name)
for(let key in obj){
    console.log(key)
}

image-20201125104205558

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a2.74
Branch： branch02

commit description：a2.74（代理Proxy——使用）

tag：a2.74


2.1 get

拦截对象属性的读取

配置Proxy的钩子函数 => get方法

返回数组对应下标的值，如果没有则返回error=>

get参数 =>

target对应传入的拦截对象，即Proxy的第一个参数。

prop对应当前的索引值

prop in target => prop在target对应的key中是否有value。

let arr = [7, 8, 9]
arr = new Proxy(arr, {
    get(target, prop) {
        console.log(target, prop)
        return prop in target ? target[prop] : 'error'
    }
})
console.log(arr[1])
console.log(arr[10])

image-20201125105312008

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a2.75
Branch： branch02

commit description：a2.75（代理Proxy——get钩子函数）

tag：a2.75


以上应用 => 实现一个字典小功能

let dict = {
    'hello': '你好',
    'world': '世界'
}
dict = new Proxy(dict, {
    get(target, prop) {
        return prop in target ? target[prop] : prop
    }
})
console.log(dict['world'])
console.log(dict['abc'])

image-20201125112946898

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a2.76
Branch： branch02

commit description：a2.76（代理Proxy——get钩子函数应用）

tag：a2.76


2.2 set

拦截对象属性的设置

set钩子函数 => 只能往数组中添加数值型值，返回bool类型。

set参数 =>

target 对应传入的拦截对象，即Proxy的第一个参数。

prop对应当前的索引值

value给目标属性设置的值

虽然通过proxy代理了数组，但是数组的自带的方法仍然可用（而defineProperty则不会）。即proxy代理并不会破坏对象的原有属性，兼容性更好。

let arr = []
arr = new Proxy(arr, {
    set(target, prop, val) {
        if (typeof val === 'number') {
            target[prop] = val
            return true
        } else {
            return false
        }
    }
})
arr.push(5)
arr.push(6)
console.log(arr[0], arr[1], arr.length)

image-20201125113857214

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a2.77
Branch： branch02

commit description：a2.77（代理Proxy——set钩子函数）

tag：a2.77


2.3 has

拦截propKey in proxy的操作，返回一个布尔值。

has钩子函数 => 判断当前对象是否有某个key，返回bool类型值

应用：判断当前的值，是否在某一个范围内。

// has
let range = {
    start: 1,
    end: 5
}

range = new Proxy(range, {
    has(target, prop){
        return prop >= target.start && prop <= target.end
    }
})
console.log(2 in range)
console.log(9 in range)

true

false

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a2.78
Branch： branch02

commit description：a2.78（代理Proxy——has钩子函数）

tag：a2.78


2.4 ownKeys

拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。

ownKeys => 拦截循环遍历方法

注意Symbol是一个变量，如果对象的key是变量，则需要加[] 中括号

回顾Symbol对象遍历 =>

let obj = {
    name: 'lisi',
    [Symbol('es')]: 'es6'
}
console.log(Object.getOwnPropertyNames(obj))  // 非Symbol的键名
console.log(Object.getOwnPropertySymbols(obj))  // 仅Symbol的键名
console.log(Object.keys(obj))  // 非Symbol的键名
for(let key in obj){ //非Symbol的键名
    console.log(key)
}

image-20201125121711392

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a2.79
Branch： branch02

commit description：a2.79（代理Proxy——回顾Symbol对象遍历）

tag：a2.79


_ 表示该属性为私有属性，对外不想暴露，比如密码

利用 for..in和 Object.keys都无法得到密码私有属性。

let userinfo = {
    username: 'lisi',
    age: 30,
    _password: '***'
}
userinfo = new Proxy(userinfo, {
    ownKeys(target) {
        return Object.keys(target).filter(key => !key.startsWith('_'))
    }
})

for (let key in userinfo) {
    console.log(key)
}
console.log(Object.keys(userinfo))

image-20201125122126027

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a2.80
Branch： branch02

commit description：a2.80（代理Proxy——ownKeys => 拦截循环遍历方法）

tag：a2.80


let user = {
    name: 'lisi',
    age: 30,
    _password: '***'
}
user = new Proxy(user, {
    get(target, prop) {
        // 防止对私有属性的访问
        if (prop.startsWith('_')) {
            throw new Error('不可访问')
        } else {
            return target[prop]
        }
    }
})

// get拦截
console.log(user.age)
console.log(user._password)

image-20201125153301030

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a2.81
Branch： branch02

commit description：a2.81（代理Proxy——get拦截私有属性）

tag：a2.81


2.5 deleteProperty

拦截delete proxy[propKey]的操作，返回一个布尔值。

删除属性的拦截操作 => deleteProperty(target, prop)，在其内部利用delete关键字，并且返回boolean类型变量。

let user = {
    name: 'lisi',
    age: 30,
    _password: '***'
}
user = new Proxy(user, {
    get(target, prop) {
        // 防止对私有属性的访问
        if (prop.startsWith('_')) {
            throw new Error('不可访问')
        } else {
            return target[prop]
        }
    },
    set(target, prop, val) {
        // 防止对私有属性的设置
        if (prop.startsWith('_')) {
            throw new Error('不可访问')
        } else {
            target[prop] = val
            return true
        }
    },
    deleteProperty(target, prop) { // 拦截删除
        // 防止对私有属性的删除
        if (prop.startsWith('_')) {
            throw new Error('不可删除')
        } else {
            delete target[prop]
            return true
        }
    }
})

// set拦截
user.age = 18
console.log(user.age)
try {
    user._password = 'xxx'
} catch(e){
    console.log(e.message)
}

// 删除拦截
try {
    delete user.age
    delete user._password
} catch (e) {
    console.log(e.message)
}
console.log(user.age)

image-20201125153507520

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a2.82
Branch： branch02

commit description：a2.82（代理Proxy——set及delete拦截私有属性）

tag：a2.82


let user = {
    name: 'lisi',
    age: 30,
    _password: '***'
}
user = new Proxy(user, {
    get(target, prop) {
        // 防止对私有属性的访问
        if (prop.startsWith('_')) {
            throw new Error('不可访问')
        } else {
            return target[prop]
        }
    },
    set(target, prop, val) {
        // 防止对私有属性的设置
        if (prop.startsWith('_')) {
            throw new Error('不可访问')
        } else {
            target[prop] = val
            return true
        }
    },
    deleteProperty(target, prop) { // 拦截删除
        // 防止对私有属性的删除
        if (prop.startsWith('_')) {
            throw new Error('不可删除')
        } else {
            delete target[prop]
            return true
        }
    },
    ownKeys(target) {
        // 防止对私有属性的遍历
        return Object.keys(target).filter(key => !key.startsWith('_'))
    }
})

for(let key in user){
    console.log(key)
}

image-20201125153929189

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a2.83
Branch： branch02

commit description：a2.83（代理Proxy——遍历拦截）

tag：a2.83


2.6 apply

拦截 Proxy实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。

apply => 拦截函数的调用以及call、apply等操作

定义一个求和函数，但其参数个数不确定。

之前代理都是对象，这里代理的是函数。

apply(target, ctx, args)

target拦截目标，即调用函数

ctx拦截上下文，this指向

args拦截的参数数组

拦截 后 将其求和结果乘2

// apply
let sum = (...args) => {
    let num = 0
    args.forEach(item => {
        num += item
    })
    return num
}

// 代理函数
sum = new Proxy(sum, {
    apply(target, ctx, args) {
        return target(...args) * 2
    }
})
console.log(sum(1, 2))
console.log(sum.call(null, 1, 2, 3))
console.log(sum.apply(null, [1, 2, 3]))

image-20201125155030720

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a2.84
Branch： branch02

commit description：a2.84（代理Proxy——apply函数调用拦截）

tag：a2.84


2.7 construct

拦截 Proxy实例作为构造函数调用的操作，比如new proxy(...args)。

construct=> 拦截new命令

construct(target, args, newTarget)

target代理的目标对象

args构造函数的参数列表

newTarget实例化对象的时候new命令作用的构造函数

其必须返回一个对象

// construct  new
let User = class {
    constructor(name) {
        this.name = name
    }
}
User = new Proxy(User, {
    construct(target, args, newTarget) {
        console.log('construct')
        return new target(...args)
    }
})
console.log(new User('zhangsan'))

image-20201125155454937

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a2.85
Branch： branch02

commit description：a2.85（代理Proxy——construct对于new指令拦截）

tag：a2.85


2.8 拦截器小结

拦截器作用
get**拦截对象属性的读取，比如proxy.foo和proxy[‘foo’] **
set拦截对象属性的设置，返回一个布尔值，比如proxy.foo = v或 proxy[‘foo’] = v
has**拦截propKey in proxy的操作，返回一个布尔值 **
own Keys拦截 Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、 foj.in循环，返回一个数组。
deleteProperty拦截delete proxy[propKey]的操作，返回一个布尔值
apply拦截函数的调用、call和apply操作
construct拦截new命令，返回一个对象

3. 反射Reflect

  • 将Object属于语言内部的方法放到（转移）Reflect上
  • 修改某些Object方法的返回结果，让其变得更合理
  • 让Object操作变成函数行为
  • Reflect对象的方法与Proxy对象的方法一一对应（两者相辅相成）
  • 估计以后的版本，一些已经移植到Reflect的方法，会从Object上删除

在js设计初期，把很多方法放在了Object下了，这实际并不太合理，后期设计将Object属于语言内部的方法放到（转移）Reflect上，这样语法会更加规范。

// Object -> Reflect
let obj = {}
let newVal = ''
Reflect.defineProperty(obj, 'name', {
    get() {
        return newVal
    },
    set(val) {
        console.log('set')
        newVal = val
    }
})
obj.name = 'es'
console.log(obj.name)

image-20201125183631085

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a2.86
Branch： branch02

commit description：a2.86（反射Reflect——将Object属于语言内部的方法放到（转移）Reflect上）

tag：a2.86


修改某些Object方法的返回结果，让其变得更合理 =>

Object.defineProperty 定义某些属性的时候，如果当前某些属性无法定义的时候，它会抛出异常。

因此一般都嵌套try…catch，因为其没有返回值。

try {
    Object.defineProperty()
} catch (e) {}

但是Reflect下，它是有返回值的，写法如下：

if (Reflect.defineProperty()) { // boolean

} else {

}

让Object操作变成函数行为

之前的语法操作，实际上Object的操作都是命令式的。

判断某个方法是否在某个对象中，以前的写法是命令式的，而现在是函数式的。

console.log('assign' in Object) // true
console.log(Reflect.has(Object, 'assign'))// true

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a2.87
Branch： branch02

commit description：a2.87（反射Reflect——让Object操作变成函数行为）

tag：a2.87


Reflect对象的方法与Proxy对象的方法一一对应（两者相辅相成）

let user = {
    name: 'lisi',
    age: 30,
    _password: '***'
}
user = new Proxy(user, {
    get(target, prop) {
        if (prop.startsWith('_')) {
            throw new Error('不可访问')
        } else {
            // return target[prop]
            return Reflect.get(target, prop)
        }
    },
    set(target, prop, val) {
        if (prop.startsWith('_')) {
            throw new Error('不可访问')
        } else {
            // target[prop] = val
            Reflect.set(target, prop, val)
            return true
        }
    },
    deleteProperty(target, prop) { // 拦截删除
        if (prop.startsWith('_')) {
            throw new Error('不可删除')
        } else {
            // delete target[prop]
            Reflect.deleteProperty(target, prop)
            return true
        }
    },
    ownKeys(target) {
        // return Object.keys(target).filter(key => !key.startsWith('_'))
        return Reflect.ownKeys(target).filter(key => !key.startsWith('_'))
    }
})

console.log(user.age)
try {
    console.log(user._password)
} catch (e) {
    console.log(e.message)
}

user.age = 18
console.log(user.age)
try {
    user._password = 'xxx'
} catch (e) {
    console.log(e.message)
}

for (let key in user) {
    console.log(key)
}

delete user.age
console.log(user.age)

image-20201125200625423

ctx=> this指向，无需改变，还指向target即可。

// apply
let sum = (...args) => {
    let num = 0
    args.forEach(item => {
        num += item
    })
    return num
}

sum = new Proxy(sum, {
    apply(target, ctx, args) {
        // return target(...args) * 2
        return Reflect.apply(target, target, [...args]) * 2
    }
})
console.log(sum(1, 2))
console.log(sum.call(null, 1, 2, 3))
console.log(sum.apply(null, [1, 2, 3]))

image-20201125200727585

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a2.88
Branch： branch02

commit description：a2.88（反射Reflect——Reflect对象的方法与Proxy对象的方法一一对应（两者相辅相成））

tag：a2.88


Reflect是一个内置的对象，它提供拦截 JavaScript操作的方法，这些方法与处理器对象的方法相同。Reflect不是一个函数对象，因此它是不可构造的。

与大多数全局对象不同，Reflect没有构造函数。你不能将其与一个new运算符一起使用，或者将Reflect对象作为一个函数来调用。Reflect的所有属性和方法都是静态的（就像Math对象）


3.1 常用方法

3.1.1 Reflect.apply()

Reflect.apply(target, thisArgument, argumentsList)

参数含义必选
target目标函数Y
thisArgumenttarget函数调用时绑定的this对象N
argumentsListtarget函数调用时传入的实参列表，该参数应该是一个类数组的对象N
Reflect.apply(Math.floor, undefined, [1.75])
// 1

Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111])
// "hello"

Reflect.apply(RegExp.prototype.exec, /ab/, ['confabulation']).index
// 4

Reflect.apply(''.charAt, 'ponies', [3])
// "i"

该方法与ES5中Function.prototype.apply()方法类似：调用一个方法并且显式地指定this变量和参数列表(arguments) ，参数列表可以是数组，或类似数组的对象。

Function.prototype.apply.call(Math.floor, undefined, [1.75])

3.1.2 Reflect.construct()

Reflect.construct()方法的行为有点像 new操作符 构造函数 ， 相当于运行 new target(...args)

Reflect.construct(target, argumentsList[, newTarget])

参数含义必选
target被运行的目标函数Y
argumentsList调用构造函数的数组或者伪数组Y
newTarget该参数为构造函数， 参考 new.target 操作符，如果没有newTarget参数， 默认和target一样N

注意如果target或者newTarget不是构造函数，抛出TypeError

Reflect.construct允许使用可变的参数来调用构造函数

var obj = new Foo(...args)
var obj = Reflect.construct(Foo, args)


var d = Reflect.construct(Date, [1776, 6, 4])
d instanceof Date // true
d.getFullYear() // 1776

如果使用 newTarget参数，则表示继承了 newTarget 这个超类：

function someConstructor() {}
var result = Reflect.construct(Array, [], someConstructor)

Reflect.getPrototypeOf(result) // 输出：someConstructor.prototype
Array.isArray(result) // true

3.1.3 Reflect.defineProperty

静态方法 Reflect.defineProperty() 基本等同于 Object.defineProperty()方法，唯一不同是返回 Boolean值。

Reflect.defineProperty(target, propertyKey, attributes)

参数含义必选
target目标对象Y
propertyKey要定义或修改的属性的名称Y
attributes要定义或修改的属性的描述Y
const student = {}
Reflect.defineProperty(student, 'name', {
    value: 'Mike'
}) // true
student.name // "Mike"

3.1.4 Reflect.deleteProperty()

Reflect.deleteProperty 允许你删除一个对象上的属性。返回一个 Boolean值表示该属性是否被成功删除。它几乎与非严格的delete operator相同。

Reflect.deleteProperty(target, propertyKey)

参数含义必选
target删除属性的目标对象Y
propertyKey将被删除的属性的名称Y
var obj = {
    x: 1,
    y: 2
}
Reflect.deleteProperty(obj, "x") // true
obj // { y: 2 }

var arr = [1, 2, 3, 4, 5]
Reflect.deleteProperty(arr, "3") // true
arr // [1, 2, 3, , 5]

// 如果属性不存在，返回 true
Reflect.deleteProperty({}, "foo") // true

// 如果属性不可配置，返回 false
Reflect.deleteProperty(Object.freeze({
    foo: 1
}), "foo") // false

3.1.5 Reflect.get()

Reflect.get()方法的工作方式，就像从object (target[propertyKey])中获取属性，但它是作为一个函数执行的。

Reflect.get(target, propertyKey[, receiver])

参数含义必选
target需要取值的目标对象Y
propertyKey需要获取的值的键值Y
receiver如果遇到 getter，此值将提供给目标调用N
// Object
var obj = {
    x: 1,
    y: 2
}
Reflect.get(obj, 'x') // 1

// Array
Reflect.get(['zero', 'one'], 1) // "one"

// Proxy with a get handler
var x = {
    p: 1
}
var obj = new Proxy(x, {
    get(t, k, r) {
        return k + 'bar'
    }
})
Reflect.get(obj, 'foo') // "foobar"

3.1.6 Reflect.getOwnPropertyDescriptor()

静态方法 Reflect.getOwnPropertyDescriptor()与 Object.getOwnPropertyDescriptor()方法相似。如果在对象中存在，则返回给定的属性的属性描述符，否则返回 undefined。

Reflect.getOwnPropertyDescriptor(target, propertyKey)

参数含义必选
target需要寻找属性的目标对象Y
propertyKey获取自己的属性描述符的属性的名称N
Reflect.getOwnPropertyDescriptor({
    x: 'hello'
}, 'x')
// {value: "hello", writable: true, enumerable: true, configurable: true}

Reflect.getOwnPropertyDescriptor({
    x: 'hello'
}, 'y')
// undefined

Reflect.getOwnPropertyDescriptor([], 'length')
// {value: 0, writable: true, enumerable: false, configurable: false}

对比

如果该方法的第一个参数不是一个对象（一个原始值），那么将造成 TypeError错误。而对于 Object.getOwnPropertyDescriptor，非对象的第一个参数将被强制转换为一个对象处理。

Reflect.getOwnPropertyDescriptor("foo", 0)
// TypeError: "foo" is not non-null object

Object.getOwnPropertyDescriptor("foo", 0)
// { value: "f", writable: false, enumerable: true, configurable: false }

3.1.7 Reflect.getPrototypeOf()

静态方法Reflect.getPrototypeOf()与 Object.getPrototypeOf()方法是一样的。都是返回指定对象的原型（即，内部的 [[Prototype]]属性的值）。

Reflect.getPrototypeOf(target)

参数含义必选
target获取原型的目标对象Y

3.1.8 Reflect.has()

Reflect.has用于检查一个对象是否拥有某个属性， 相当于in操作符

Reflect.has(target, propertyKey)

参数含义必选
target获取原型的目标对象Y
propertyKey属性名，需要检查目标对象是否存在此属性Y

3.1.9 Reflect.isExtensible()

Reflect.isExtensible 判断一个对象是否可扩展 （即是否能够添加新的属性），它与 Object.isExtensible()方法一样。

Reflect.isExtensible(target)

参数含义必选
target获取原型的目标对象Y

3.1.10 Reflect.ownKeys()

Reflect.ownKeys 方法返回一个由目标对象自身的属性键组成的数组。它的返回值等同于 Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))

Reflect.ownKeys(target)

参数含义必选
target获取原型的目标对象Y
Reflect.ownKeys({
    z: 3,
    y: 2,
    x: 1
}) // [ "z", "y", "x" ]
Reflect.ownKeys([]) // ["length"]

var sym = Symbol.for("comet")
var sym2 = Symbol.for("meteor")
var obj = {
    [sym]: 0,
    "str": 0,
    "773": 0,
    "0": 0,
    [sym2]: 0,
    "-1": 0,
    "8": 0,
    "second str": 0
}
Reflect.ownKeys(obj)
// [ "0", "8", "773", "str", "-1", "second str", Symbol(comet), Symbol(meteor) ]
// Indexes in numeric order,
// strings in insertion order,
// symbols in insertion order

3.1.11 Reflect.preventExtensions()

Reflect.preventExtensions 方法阻止新属性添加到对象 例如：防止将来对对象的扩展被添加到对象中)。该方法与 Object.preventExtensions() 方法一致

Reflect.preventExtensions(target)

参数含义必选
target获取原型的目标对象Y
// Objects are extensible by default.
var empty = {}
Reflect.isExtensible(empty) // === true

// ...but that can be changed.
Reflect.preventExtensions(empty)
Reflect.isExtensible(empty) // === false

Reflect.preventExtensions(1)
// TypeError: 1 is not an object

Object.preventExtensions(1)
// 1

3.1.12 Reflect.set()

Reflect.set 方法允许你在对象上设置属性。它的作用是给属性赋值并且就像property accessor语法一样，但是它是以函数的方式。

Reflect.set(target, propertyKey, value[, receiver])

参数含义必选
target获取原型的目标对象Y
propertyKey设置的属性的名称Y
value设置的值Y
receiver如果遇到 setter，this 将提供给目标调用N
// Object
var obj = {}
Reflect.set(obj, "prop", "value") // true
obj.prop // "value"

// Array
var arr = ["duck", "duck", "duck"]
Reflect.set(arr, 2, "goose") // true
arr[2] // "goose"

// It can truncate an array.
Reflect.set(arr, "length", 1) // true
arr // ["duck"]

// With just one argument, propertyKey and value are "undefined".
var obj = {}
Reflect.set(obj) // true
Reflect.getOwnPropertyDescriptor(obj, "undefined")
// { value: undefined, writable: true, enumerable: true, configurable: true }

3.1.13 Reflect.setPrototypeOf()

Reflect.setPrototypeOf 方法改变指定对象的原型 （即，内部的 [[Prototype]] 属性值）

Reflect.setPrototypeOf(target, prototype)

参数含义必选
target获取原型的目标对象Y
prototype对象的新原型 （一个对象或 null）Y
Reflect.setPrototypeOf({}, Object.prototype) // true

// It can change an object's [[Prototype]] to null.
Reflect.setPrototypeOf({}, null) // true

// Returns false if target is not extensible.
Reflect.setPrototypeOf(Object.freeze({}), null) // false

// Returns false if it cause a prototype chain cycle.
var target = {}
var proto = Object.create(target)
Reflect.setPrototypeOf(target, proto) // false

注意

对于以上所有 API 第一个参数是 Object 的，如果给定的不是 Object 则抛出一个 TypeError 异常




（后续待补充）
溜_x_i_a_o_迪
关注
专栏目录
ES6基础知识题
02-17
根据给定的信息，以下是对各个知识点的详细解读： ### ECMAScript规范的理解 - **ECMAScript定义的内容**：ECMAScript（简称ES）是一种脚本语言标准的规范，主要定义了JavaScript的核心语法和功能。它包括数据类型...
es6 阮一峰
02-07
《ES6 阮一峰》是一本详细解读ECMAScript 6（也称为ES2015）标准的中文指南，由知名前端开发者阮一峰编写。这本书以PDF格式提供，适合读者在线阅读或下载后离线学习，并且允许在文档上做笔记，为学习过程提供了便利...
9个常用ES6特性归纳
web前端开发
09-01 133
1、展开操作符顾名思义，用于对象或数组之前的展开操作符（…），将一个结构展开为列表。演示一下：let firstHalf = [ one , two ]; let secondHalf ...
15.（ECMAScript）es9完全解读
xiao廸要飞
02-18 1500
文章目录1. 重点提炼2. 异步迭代：for await of2.1 for await of2.2 Symbol.asyncIterator3. 正则表达式扩展：dotAll，具名组匹配，后行断言3.1 dotAll 模式3.2 具名组匹配3.3 后行断言4. 对象扩展：Rest & Spread4.1 小结5. Promise扩展：Promise.prototype.finally()5.1 应用5.1.1 loading关闭5.1.2 数据库断开链接6. 字符串扩展：放松模板字符串文字限制
10.（ECMAScript）es6完全解读（9）
xiao廸要飞
02-16 252
文章目录1. 重点提炼2. 异步操作必备知识3. Ajax原理与Callback Hell4. 异步编程解决方案Promise4.1 常用方法4.1.1 Promise.prototype.then()4.1.2 Promise.prototype.catch()4.1.3 code5. Promise的静态方法5.1 Promise.resolve()5.2 Promise.reject()5.3 Promise.all()5.4 Promise.race()5.5 应用场景6. 异步编程解决方案Gen
8.（ECMAScript）es6完全解读（7）
xiao廸要飞
02-16 289
文章目录1. 重点提炼2. 字符串的扩展2.1 unicode2.2 字符串的遍历器接口2.3 模版字符串2.4 新增方法3. 正则表达式的扩展3.1 y修饰符3.2 u修饰符4. 数值的扩展 1. 重点提炼 字符串扩展 正则表达式扩展 数值扩展 2. 字符串的扩展 字符的Unicode表示法 字符串的遍历器接口 模版字符串 String.fromCodePoint String.prototype.includes() String.prototype.startsWith() String.pr
12.（ECMAScript）es6完全解读（11）
xiao廸要飞
02-16 318
文章目录1. 重点提炼2. 模块化Module的发展3. 模块化规范4. export5. as6. export default7. import8. code演示9. es6 导入导出关键字总结 1. 重点提炼 模块化Module 模块化规范 es6模块化介绍与总结 2. 模块化Module的发展 技术的诞生是为了解决某个问题，模块化也是。 随着前端的发展，web技术日趋成熟，js功能越来越多，代码量也越来越大。之前一个项目通常各个页面公用一个js，但是js逐渐拆分，项目中引入的js越来越多。在j
2.（ECMAScript）es6完全解读（1）
xiao廸要飞
01-14 197
文章目录1. 重点提炼2. 作用域2.1 全局作用域2.2 函数作用域2.3 块状作用域2.4 动态作用域3. 新的声明方式：let3.1 代码演示3.2 笔试题4. 新的声明方式const （常量）4.1 代码演示5. 解构赋值5.1 代码演示5.2 笔试题15.3 笔试题25.4 笔试题35.5 笔试题45.6 笔试题55.7 应用场景1 ——赋默认值5.8 应用场景2——函数参数解构赋值5.9 应用场景3——函数返回值解构赋值5.10 应用场景4——提取JSON数据 1. 重点提炼 作用域 let
6.（ECMAScript）es6完全解读（5）
xiao廸要飞
02-12 194
文章目录1. 重点提炼2. 面向过程与面向对象2.1 类与对象3. ES5中的类与继承4. ES6中的类与继承 1. 重点提炼 面向过程 面向对象 es5/es6中的类与继承等基本使用 2. 面向过程与面向对象 面向过程 => 分析需求整个过程由哪个几个步骤组成，逐步实现。 面向对象 => 分析需求中由哪几个对象组成，分析每种对象应该由哪些属性和方法 / 行为组成。 如下： 隐藏对象 => 可能是人、手、或者其他工具将大象放入冰箱 JavaScript是一种基于对象（
3.（ECMAScript）es6完全解读（2）
xiao廸要飞
01-14 173
文章目录1. 重点提炼2. ES5中数组的各种遍历方式2.1 for循环遍历数组2.2 foreach遍历数组2.3 for循环与foreach的差别2.4 map2.5 map 与 foreach 的差别2.6 filter2.7 some2.8 every2.9 reduce2.10 for…in3. ES6中数组遍历方式3.1 find3.2 findIndex3.3 for…of4. ES6中数组的扩展方法4.1 类数组 / 伪数组 转为数组 => slice4.2 Array.of4.
7.（ECMAScript）es6完全解读（6）
xiao廸要飞
02-12 187
文章目录1. 重点提炼2. 新的原始数据类型Symbol2.1 应用场景2.1.1 作为属性名2.1.2 属性遍历2.1.3 消除魔术字符串3. 新的数据结构Set3.1 应用场景3.2 WeakSet4. 新的数据结构Map4.1 应用场景4.2 weakmap 1. 重点提炼 Symbol基本使用 Set及Weakset使用及应用场景 Map及Weakmap使用及应用场景 2. 新的原始数据类型Symbol ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值。它是 JavaS
ECMAScript 6入门.pdf
11-07
ECMAScript 6，也被简称为ES6，是JavaScript语言的下一代标准，它的发布目的是为了让JavaScript语言能够用于编写更复杂的大型应用程序，进而成为企业级开发语言。ES6在2015年6月正式发布，并且按照计划，标准制定者...
深入浅出ES6
01-13
以下是对ES6核心概念和技术点的详细解读。 首先，ES6的核心变化体现在以下几个方面： 1. **定义与扩展**：ES6是对JavaScript语言的官方标准规范ECMAScript的第六次主要修订。ECMAScript定义了JavaScript的核心语言...
shopping_cart:ES6购物车项目
03-24
ES6，全称ECMAScript 2015，是JavaScript语言的一个重要版本更新，引入了许多新特性，如箭头函数、类、解构赋值、模块化等，极大地提升了开发效率和代码质量。 【描述分析】：“购物车”一词表明项目的核心功能是...
16.（ECMAScript）es10完全解读
xiao廸要飞
02-18 1107
文章目录1. 重点提炼2. 对象扩展：Object.fromEntries()2.1 Object 转换操作2.2 Map 转 Object2.3 过滤3. 字符串扩展：String.prototype.trimStart() ，String.prototype.trimEnd()3.1 String.prototype.trimStart()3.2 String.prototype.trimEnd()3.3 code4. 数组扩展：Array.prototype.flat()，Array.prototy
17.（ECMAScript）es11完全解读
xiao廸要飞
02-18 1028
文章目录1. 重点提炼2. 字符串扩展2.1 定义一个html模版的字符串。 => 需求：获取div标签中的内容。2.1.1 exec g实现2.1.2 /g作用2.1.3 match实现2.1.4 replace实现2.1.5 matchAll3. 动态导入：Dynamic import()4. 新的原始数据类型：BigInt4.1 数字后面增加n4.2 使用 BigInt 函数5. Promise扩展：Promise.allSettled()6. 全局对象：globalThis7. 可选链：O
13.（ECMAScript）es7完全解读
xiao廸要飞
02-16 680
文章目录1. 重点提炼2. 数组扩展：Array.prototype.includes()2.1 includes与indexOf区别3. 数值扩展：幂运算符 1. 重点提炼 Array.prototype.includes 幂运算符** 2. 数组扩展：Array.prototype.includes() Array.prototype.includes(searchElement, fromIndex) includesVS indexOf 在 ES7之前想判断数组中是否包含一个元素，基本可
1.（ECMAScript）基本介绍及环境搭建
xiao廸要飞
01-12 413
文章目录1. 重点提炼2. 引言3. es环境4. 环境搭建5. 构建开发环境6. 案例1：可选链7. 案例2：消除魔术字符串8. 案例3：将类数组转化为数组9. 案例4：优雅的异步操作与解构赋值 1. 重点提炼 ES新特性与旧语法对比说明，理解新特性优势 新语法的应用场景 ES开发脚手架，开箱即用 2. 引言 学会框架 ≠\neq​= 掌握前端 无论使用哪种方式（框架）写代码（盖房子），es实际就是砖头，在项目中必不可少。 ES每年都会出一个版本。 => es新特性，及语法的升级
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值