>  기사  >  웹 프론트엔드  >  JavaScript의 Object.create() 사용법 소개

JavaScript의 Object.create() 사용법 소개

不言
不言앞으로
2018-12-10 17:45:423495검색

이 글은 JavaScript의 Object.create() 사용법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Object.create(null)에 의해 생성된 개체는 Object.prototype 프로토타입 체인의 속성이나 메서드를 상속하지 않는 빈 개체입니다.

예: toString(), hasOwnProperty() 및 기타 메서드

매개변수 Description
obj 상속할 객체를 나타내는 생성된 객체의 프로토타입
propertiesObject(선택 사항) 도 새로 생성된 객체를 초기화하는 데 사용되는 객체

기본 구현을 살펴보겠습니다

    Object.create =  function (o) {
        var F = function () {};
        F.prototype = o;
        return new F();
    };

특정 애플리케이션을 살펴보겠습니다.

    //创建一个Obj对象
    var Obj ={
        name:'mini',
        age:3,
        show:function () {
            console.log(this.name +" is " +this.age);
        }
    }

    //MyObj 继承obj, prototype指向Obj
    var MyObj = Object.create(Obj,{
        like:{
            value:"fish",        // 初始化赋值
            writable:true,       // 是否是可改写的
            configurable:true,   // 是否能够删除,是否能够被修改
            enumerable:true      //是否可以用for in 进行枚举
        },
        hate:{
            configurable:true,
            get:function () { console.log(111);  return "mouse" }, // get对象hate属性时触发的方法
            set:function (value) {                                 // set对象hate属性时触发的方法 
                console.log(value,2222);
                return value;
            }    
        }
    });
초점: 여기서 get 및 set 메서드는 더 큰 잠재력을 갖고 있는 것 같습니다. 이를 사용하여 데이터 필터링 및 데이터 바인딩을 구현할 수 있습니다. 몇 가지 간단한 mvvm 효과를 얻으려면

Object.create 상속 적용:

    var A = function () { };
    A.prototype.sayName=function () {
        console.log('a');
    }

    // B的实例继承了A的属性
    var B = function () { };
    B.prototype = Object.create(A.prototype);
    var b = new B();
    b.sayName();  // a

요점: 생성자 상속과 비교할 때 Object.create 상속은 A와 B의 프로토타입을 완벽하게 분리합니다. 양 당사자는 서로 영향을 미치지 않습니다. 이것이 바로 Object.create가 빛을 발하는 곳입니다

위 내용은 JavaScript의 Object.create() 사용법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제