ES6 새로운 기능: JavaScript의 Reflect 객체 코드에 대한 자세한 설명

Reflect 소개:

Reflect 객체는 내 노드(v4.4.3)나 babel(6.7.7)에서 구현되지 않았습니다. 예, ff는 오랫동안 Proxy와 Reflect를 지원해 왔습니다. 노드가 Reflect를 지원하도록 하려면

Reflect를 사용하려는 경우 직접 호출하세요. Reflect.method()를 통해 Reflect의 메소드는 Proxy의 메소드와 유사하며 대부분의 기본 Object Reflect 메소드가 다시 구현되었습니다.

Reflect를 사용해야 하는 이유

Reflect를 사용해야 하는 몇 가지 이유는 다음과 같습니다. 번역 주소: Reflect, 대략 번역:

1: 더 유용한 반환 값: Reflect에는 몇 가지가 있습니다. Reflect.getOwnPropertyDescriptor 및 Reflect.defineProperty와 같은 ES5의 Object 메소드와 동일한 메소드 그러나 Object.defineProperty(obj, name, desc)가 성공적으로 실행되면 obj와 발생한 오류가 반환됩니다. 다른 이유로 인해 Reflect .defineProperty는 객체의 속성이 설정되었는지 여부를 나타내기 위해 false 또는 true만 반환합니다.

try {
  Object.defineProperty(obj, name, desc);
  // property defined successfully
} catch (e) {
  // possible failure (and might accidentally catch the wrong exception)
}

다음과 같이 리팩토링됩니다.

if (Reflect.defineProperty(obj, name, desc)) {
  // success
} else {
  // failure
}

Relect.set , Reflect.deleteProperty, Reflect.preventExtensions, Reflect.setPrototypeOf 등은 모두 리팩터링될 수 있습니다.

2: obj에 정의가 있거나 속성 이름을 상속하는지 판단하려는 경우 함수 작업 , ES5에서는 다음과 같이 판단합니다: obj의 이름; 또는 속성 삭제: 사용하기 쉽고 매우 짧고 명확하지만 사용할 때 클래스로 캡슐화해야 합니다. >Reflect를 사용하면 도움이 됩니다. Reflect.has(obj, name), Reflect.deleteProperty(obj, name);

3: 보다 안정적인 기능 실행 방법: ES에서는 다음을 원합니다. f 함수를 실행하고 매개변수 args 세트를 전달하고, 이를 바인딩하려면 다음과 같이 작성해야 합니다.

f.apply(obj, args)

그러나 f의 적용은 사용자 자신의 적용으로 재정의될 수 있으므로 다음과 같이 작성하는 것이 더 안정적입니다:

Function.prototype.apply.call(f, obj, args)

위 코드는 너무 길고 이해하기 어렵습니다. Reflect를 사용하면 더 짧고 간결하며 명확하게 만들 수 있습니다.

Reflect.apply(f, obj, args)

4 : 가변 매개변수 형식의 생성자: Imagine, 길이가 불확실한 매개변수를 사용하여 생성자를 인스턴스화하려고 합니다. ES5에서는 다음과 같이 작성할 수 있는 확장 기호를 사용할 수 있습니다.

var obj = new F(...args)

그러나 ES5에서는 확장 문자는 지원되지 않으므로 F.apply 또는 F.call만 사용하여 다른 매개변수를 전달할 수 있습니다. 불행하게도 F는 치트인 생성자이지만 Reflect를 사용하면 ES5에서 다음과 같이 작성할 수 있습니다. >

var obj = Reflect.construct(F, args)

5: 접근자 또는 판독기의 제어: ES5에서 요소의 속성을 읽거나 속성을 설정하려면 다음을 수행해야 합니다:

var name = ... // get property name as a string
obj[name] // generic property lookup
obj[name] = value // generic property update

Reflect.get 그리고 Reflect.set 메소드를 사용하면 동일한 작업을 수행할 수 있으며 추가 매개변수 수신자를 추가하여 객체의 setter와 getter의 컨텍스트를 설정할 수 있습니다.

var name = ... // get property name as a string
Reflect.get(obj, name, wrapper) // if obj[name] is an accessor, it gets run with `this === wrapper`
Reflect.set(obj, name, value, wrapper)

접근자는 자체 메소드를 사용하기를 원하지 않습니다. 하지만 이를 래퍼로 리디렉션하려고 합니다.

var obj = {
    set foo(value) { return this.bar(); },
    bar: function() {
        alert(1);
    }
};
var wrapper = {
    bar : function() {
        console.log("wrapper");
    }
}
Reflect.set(obj, "foo", "value", wrapper);

6: __proto__에 대한 직접 액세스를 피하세요. ES5는 객체의 프로토타입에 액세스하기 위해 Object.getPrototypeOf(obj)를 제공합니다. ES6은

및 Reflect.setPrototypeOf도 제공합니다. (obj, newProto) 이것은 객체의 프로토타입에 액세스하고 설정하는 새로운 방법입니다.

Reflect.apply 사용Reflect.getPrototypeOf(obj)

Reflect.apply는 실제로 Function의 대체입니다. ES5의 .prototype.apply(), Reflect.apply 실행 세 가지 매개변수가 필요합니다

첫 번째 매개변수는 실행해야 하는 함수입니다.

두 번째 매개변수는 함수의 컨텍스트입니다.

세 번째 매개변수는 다음과 같습니다. 배열 또는 의사 배열이며,

<script>
let fn = function() {
    this.attr = [0,1,2,3];
};
let obj = {};
Reflect.apply(fn, obj, [])
console.log(obj);  
</script>

Reflect.apply 데모:

<script>
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"
</script>

Reflect는 프록시와 함께 사용할 수 있습니다:

{
    var  Fn = function(){
    };
    Fn.prototype.run = function() {
        console.log( "runs out" );
    };
    var ProxyFn  = new Proxy(Fn, {
        construct (target ,arugments) {
            console.log("proxy constructor");
            var obj = new target(...arugments);
            //Reflect.apply的使用方法;
            Reflect.apply(target.prototype.run, obj, arugments);
            return obj;
        }
    });
    new ProxyFn ();  //会先输出: "proxy constructor" ； 再输出： runs out
}

Reflect.construct() 사용법:

Reflect.construct는 실제로 매개변수 형식으로 전달되는 인스턴스화 생성자입니다. 구현 및 실행 방법은 다르지만 실제로는 생성자의 첫 번째 매개변수가 동일합니다. 두 번째 매개변수는 매개변수로 구성된 배열 또는 의사 배열입니다. 기본 사용 방법은 다음과 같습니다.

var Fn = function(arg) {
    this.args = [arg]
};
console.log( new Fn(1), Reflect.construct(Fn,[1]) ); // 输出是一样的

var d = Reflect.construct(Date, [1776, 6, 4]);
d instanceof Date; // true
d.getFullYear(); // 1776
//所以Reflect.consturct和new 构

그래서 Reflect는 적어도 지금까지는 동일합니다.

세 번째 매개변수를 Reflect.construct에 전달할 수 있습니다. 세 번째 매개변수는 슈퍼 클래스이고 새 요소는 이 슈퍼 클래스를 상속합니다.

<script>
function someConstructor() {}
var result = Reflect.construct(Array, [], someConstructor);
Reflect.getPrototypeOf(result); // someConstructor.prototype
Array.isArray(result); // true
//or
var Fn = function() {
    this.attr = [1];
};
var Person = function() {
};
Person.prototype.run = function() {
};
console.log( Reflect.construct(Fn, [], Person) );
</script>

이를 사용할 수 있습니다. 특수 배열을 구현하려면 배열을 상속하되 자체 메서드도 있어야 합니다.

var Fn = function() {
    Array.apply(this, arguments);
    this.shot = ()=> {
        console.log("heheda");
    };
};
var arr = Reflect.construct(Fn, [])

Reflect.defineProperty Use;

Reflect.defineProperty는 부울 값을 반환합니다. 직접 할당을 통해 객체에 대한 속성 및 속성 값은 전체 객체를 반환합니다. 추가에 실패하면 오류가 발생합니다.

var obj = {};
obj.x = 10;
console.log(obj.x) //输出：10；

Reflect.defineProperty를 사용하여 값을 추가합니다.

<script>
var obj = {};
if( Reflect.defineProperty(obj, "x", {value : 7 }) ) {
    console.log("added success");
}else{
    console.log("添加失败");
};
</script>

如果我们执行preventExtensions， 通过Object.defindProperty定义新属性报错了， 但是通过Reflect.defineProperty没有报错， 返回了一个false的值：

var obj = {};
Object.preventExtensions(obj);
Object.defineProperty(obj, "x" , {
    value: 101,
    writable: false,
    enumerable: false,
    configurable: false
});// 直接抛错了;
console.log( Reflect.defineProperty(obj, "x", {value:101}) ) //返回false：

如果通过直接赋值的方式， 无论是否正确赋值， 都返回设置的值， 除非我们手动确认对象的属性值是否设置成功；

<script>
var obj = {};
Object.preventExtensions(obj);
console.log( obj.aa = 1 ); //输出：1；
console.log(obj.aa) //输出：undefined；
</script>

Reflect.deleteProperty的使用：

Reflect.deleteProperty和Reflect.defineProperty的使用方法差不多， Reflect.deleteProperty和 delete obj.xx的操作结果是一样， 区别是使用形式不同：一个是操作符，一个是函数调用；

Reflect.deleteProperty(Object.freeze({foo: 1}), "foo"); // false
delete Object.freeze({foo: 1}).foo; //输出：false；

Reflect.get()方法的使用

这个方法的有两个必须的参数： 第一个为obj目标对象， 第二个为属性名对象， 第三个是可选的，是作为读取器的上下文(this);

var obj = {};
obj.foo = 1;
console.log( obj.foo ); //输出：1;
console.log( Reflect.get(obj, "foo") ) //输出：1;

如果Reflect.get有第三个参数的话, 第三个参数会作为读取器的上下文：

var Reflect = require('harmony-reflect');

var obj = {
    "foo" : 1,
    get bar() {
        return this.foo;
    }
};
var foo = {};
foo.foo = "heheda";
console.log(Reflect.get(obj, "bar", foo));

Reflect.getOwnPropertyDescritptor()方法的使用：

通过Reflect.getOwnPropertyDescritptor获取属性描述：

Reflect.getOwnPropertyDescriptor({x: "hello"}, "x");
//也可以这样获取：
Object.getOwnPropertyDescriptor({x:"1"},"x");
//这两个的区别是一个会包装对象， 一个不会：
Reflect.getOwnPropertyDescriptor("hello",0); //抛出异常
Object.getOwnPropertyDescriptor("hello",0); //输出： {value: "h", writable: false, enumerable: true, configurable: false}

Reflect.getPrototypeOf()方法的使用：

Reflect.getPrototypeOf和Object.getPrototypeOf是一样的, 他们都是返回一个对象的原型

Reflect.getPrototypeOf({}); // 输出：Object.prototype
Reflect.getPrototypeOf(Object.prototype); // 输出：null
Reflect.getPrototypeOf(Object.create(null)); // 输出： null

Reflect.has的使用

Reflect.has这个方法有点像操作符：in ， 比如这样： xx in obj;

<script>
Reflect.has({x:0}, "x") //输出： true；
Reflect.has({y:0}, "y") //输出：true
； var obj = {x:0}; console.log( "x" in obj); 
var proxy = new Proxy(obj, { has : function(target, args) { console.log("执行has方法"); 
return Reflect.has(target,...args); } }); 
console.log( "x" in proxy); //输出：true； console.log(Reflect.has(proxy, "x")) //输出：true； </script>

这个demo的obj相当于变成了一个方法了， 没他什么用 ， 只是利用了他的has方法：

obj = new Proxy({}, {
    has(t, k) { return k.startsWith("door"); }
});
Reflect.has(obj, "doorbell"); // true
Reflect.has(obj, "dormitory"); // false

Reflect.isExtensible()的使用

// 现在这个元素是可以扩展的；
var empty = {};
Reflect.isExtensible(empty); // === true

// 使用preventExtensions方法， 让这个对象无法扩展新属性；
Reflect.preventExtensions(empty);
Reflect.isExtensible(empty); // === false

// 这个对象无法扩展新属性， 可写的属性依然可以改动
var sealed = Object.seal({});
Reflect.isExtensible(sealed); // === false

// 这个对象完全被冻结了
var frozen = Object.freeze({});
Reflect.isExtensible(frozen); // === false

Reflect.isExtensible和Object.isExtensible的区别是， 如果参数不对，一个会抛错， 另一个只是返回true或者false：

Reflect.isExtensible(1);
// 抛错了: 1 is not an object
Object.isExtensible(1);
// 返回false;

Reflect.ownKeys()方法的使用：

Reflect.ownKeys， Object可没有ownKeys方法, Reflect.ownKeysz他的作用是返回对象的keys;

console.log(Reflect.ownKeys({"a":0,"b":1,"c":2,"d":3})); //输出 ：["a", "b", "c", "d"]
console.log(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) ]

Reflect.ownKeys的排序是根据: 先显示数字， 数字根据大小排序，然后是 字符串根据插入的顺序排序， 最后是symbol类型的key也根据插入插入顺序排序;

出现这中排序是因为，你给一个对象属性赋值时候， 对象的key的排序规则就是先数字， 在字符串， 最后是symbol类型的数据；

Reflect.preventExtensions()的使用方法：

Object也有preventExtensions方法， 和Reflect.preventExtensions()有一点区别， 如果Reflect.preventExtensions参数不是对象会抛错；

var empty = {};
Reflect.isExtensible(empty); // === true

// 执行preventExtensions后的对象可以修改；
Reflect.preventExtensions(empty);
Reflect.isExtensible(empty); // === false

Reflect.preventExtensions(1);
// TypeError: 1 is not an object
Object.preventExtensions(1);
//不会抛错， 会返回：1

Reflect.set()

Reflect.set方法和get是差不多的；

var obj = {};
Reflect.set(obj, "prop", "value"); // 输出：true
console.log( obj.prop ); // 输出："value"

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

Reflect.set(arr, "length", 1); // true
console.log( arr );// ["duck"];

Reflect.set(obj)相当于 Reflect.set(obj, undefined, undefined);

var obj = {};
Reflect.set(obj); // 输出：true
//以上的代码相当于 Reflect.set(obj, undefined, undefined);
Reflect.getOwnPropertyDescriptor(obj, "undefined");
// { value: undefined, writable: true, enumerable: true, configurable: true }

Reflect.set也可以有第四个参数， 这个参数会作为stter的this;

var obj = {
    value : 10,
    set key( value ) {
        console.log("setter");
        this.value =  value;
    },
    get key() {
        return this.value;
    }
};
Reflect.set(obj,"key","heheda", obj);
console.log(obj);

Reflect.setPrototypeOf()

Reflect.setPrototypeOf()方法和Object.setPrototypeOf差不多一样样的， 会给对象设置原型， 就是更改对象的__proto__属性了…;

Reflect.setPrototypeOf({}, Object.prototype); // 输出true

// 给该对象数组[[Prototype]] 为null.
Reflect.setPrototypeOf({}, null); // true
// 此时的obj.__proto__为undefine

//把对象冻结以后重新设置[[prototype]]
Reflect.setPrototypeOf(Object.freeze({}), null); // false

// 如果原型链循环依赖的话就会返回false.
var target = {};
var proto = Object.create(target);
Reflect.setPrototypeOf(target, proto); // false

 以上就是ES6新特性：JavaScript中的Reflect对象代码详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！