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

不言
풀어 주다: 2018-12-10 17:46:15
앞으로
3494명이 탐색했습니다.

이 글은 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으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿