>  기사  >  웹 프론트엔드  >  js 성배 패턴 설명

js 성배 패턴 설명

小云云
小云云원래의
2018-03-27 17:04:263245검색

성배 패턴은 기존 프로토타입 객체(A.prototype)의 멤버(주로 공용 메서드)를 상속하는 동시에 필요에 따라 프로토타입 객체(A.prototype)를 수정하여 생성자 B를 사용자 정의하기 위해 존재합니다. 요구 사항을 충족하는 경우 이 수정 사항은 기존 인스턴스(a1, a2,...)에 영향을 미치지 않습니다.

변수를 공유하는 일반적인 상속

var Person =  function () {};
Person.prototype.sayHello = function () {
    console.log('hello');
};// 假设 person 原型属性上有很多方法和变量我们需要拿来使用,比如: spell这个方法我们要拿来继续使用Person.prototype.spell = function () {
    console.log('i can spell!');
};var personA = new Person();var personB = new Person();var personC = new Person();var personD = new Person();var personE = new Person();var personF = new Person();var personG = new Person();var personH = new Person();
personA.sayHello();
personA.spell();
personB.sayHello();
personB.spell();// ...// 之前应项目需求 实例化了很多对象, 现在需要 实例化 n 个说中文的对象,同时要具备之前的 spell相同能力 Person.prototype.sayHello = function () {
    console.log('你好');
};var chinaPersonA = new Person();var chinaPersonB = new Person();var chinaPersonC = new Person();var chinaPersonD = new Person();var chinaPersonE = new Person();
chinaPersonA.sayHello();
chinaPersonA.spell();
chinaPersonB.sayHello();
chinaPersonB.spell();// ...// 之前的对象还能说英文 hello 吗? 显然不能了personA.sayHello(); // 你好personA.spell();
personB.sayHello(); // 你好personB.spell();// 显然我们对已存在的原型对象修改,对别人使用的的或者说以前构建的对象产生了影响

성배 패턴으로 문제 해결

var Person = function () {}
Person.prototype.sayHello = function () {
    console.log('hello');
};
Person.prototype.spell = function () {
    console.log('i can spell!');
};var personA = new Person();var personB = new Person();
personA.sayHello();
personA.spell();var grailMode = (function () {
    return function (Origin, Target) {
        var Temp = function () {};// 临时构造函数
        Temp.prototype = Origin.prototype;
        Target.prototype = new Temp();  // 这里不是明白,为什么要加个临时构造函数
        Target.prototype.constructor = Target; // 目标构造函数原型属性constructor指向 目标构造函数
        Target.prototype.ancestor = Origin; // target 的生父
    }
})();// 我们定制的构造函数var ChinaPerson = function () {}
grailMode(Person, ChinaPerson);

ChinaPerson.prototype.sayHello = function () {
    console.log('你好');
}var ChinaPersonA = new ChinaPerson();
ChinaPersonA.sayHello();
ChinaPersonA.spell();

personA.sayHello();
personA.spell();

결론

  1. 성배 패턴은 기존 생성자(Factory)를 통해 인스턴스 객체(P)를 빌드한 다음 생성자( C), 이 생성자(C)의 프로토타입 속성이 이 인스턴스 객체(P)(임시 생성자의 인스턴스 객체)를 가리키도록 하여 사용자 정의 생성자(C)의 프로토타입 속성을 변경할 때 유일한 것은 변경되는 것은 인스턴스 객체(P)의 속성 멤버일 뿐입니다. 프로토타입 체인 액세스의 원칙은 먼저 해당 멤버가 현재 객체에 존재하는지 확인하고 존재하지 않으면 직접 액세스하는 것입니다. 프로토타입 객체... 프로토타입 체인을 순회하지 않으면 정의되지 않은 값이 반환됩니다.

  2. 인스턴스는 프로토타입 객체의 속성 멤버에 액세스할 수 있지만

    프로토타입 객체의 멤버를 수정할 수는 없습니다. Instance.member는 현재 인스턴스에 속성 멤버를 추가하고 값을 할당하는 것과 같습니다.

위 내용은 js 성배 패턴 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.