JS 상속 소개

不言
풀어 주다: 2018-07-05 17:10:25
원래의
1550명이 탐색했습니다.

이 글은 주로 참조 가치가 있는 JS 상속에 대한 소개입니다. 이제는 모든 사람과 공유합니다. 도움이 필요한 친구들이 참조할 수 있습니다.

ClassA

  • 두 부분으로 구성됩니다.

  • 생성자 부분에서는 각 인스턴스가 독립적입니다.

  • 프로토타입 부분은 인스턴스별로 공유됩니다.

// 构造函数
function ClassA(sColor) {
    this.color = sColor;
}

// 原型
ClassA.prototype.sayColor = function () {
    alert(this.color);
};
로그인 후 복사

인스턴스를 생성합니다.

  • 내부 작업:

    1. 이것은 새로운 { }를 가리키고 객체의 __proto__는 ClassA.prototype을 가리킵니다.

    2. ClassA 생성자를 실행합니다.

    3. 이 항목이 가리키는 { }를 반환합니다.

var a = new ClassA();

console.log(a.__proto__ === ClassA.prototype);
// a 的继承对象指向 ClassA
console.log(a.constructor === ClassA);
로그인 후 복사

프로토타입 부분 상속

function ClassB() {
    // 实现继承 ClassA 构造函数部分的继承
}

ClassB.prototype = new ClassA();
// ClassB.prototype 指向新对象时,原有的 ClassB.constructor 属性会消失。
// new ClassA().hasOwnProperty('constructor') 为 false,新生成的对象无 constructor 属性。
// 在此修复这个问题。
ClassB.constructor = ClassB;
// 不过还存在 new ClassA().hasOwnProperty('color') 为 true 问题
// 实现继承 ClassA 构造函数部分的继承,生成的属性优先级比 new ClassA().color 高,顾可以忽略
로그인 후 복사

생성자 부분 상속 - 객체 가장

  1. ClassA를 ClassB에 메소드로 도입하는데, 이때 둘은 이것을 공유합니다.

  2. ClassA 생성자를 실행합니다.

  3. 임시 소개를 삭제합니다.

function ClassB(sColor) {
    this.newMethod = ClassA;
    this.newMethod(sColor);
    delete this.newMethod;
}
로그인 후 복사

생성자 부분 상속-apply/call/bind

  • 객체 가장의 함수 구현입니다.

  • ClassB의 this를 ClassA의 this에 바인딩하고 생성자 ClassA를 실행합니다.

function ClassB(sColor) {
    ClassA.call(this, sColor);
    // 以下两种方式效果一样,只是实现方式不同
    // ClassA.apply(this, [sColor]);
    // ClassA.bind(this, sColor)();
}
로그인 후 복사

Inheritance

  • 상속은 생성자 상속과 프로토타입 상속의 두 부분으로 구성됩니다. 상속 방법의 조합을 선택할 수 있습니다.

  • 생성자 프로토타입의 --constructor 속성은 항상 생성자 자체를 가리킵니다. 상속시 수정된 경우 마지막에 수정해주세요.

  • 상속은 원래 기능을 유지하므로 상속 후 새 생성자 또는 프로토타입 속성을 확장할 수 있습니다.

날짜 상속

// 需要考虑polyfill情况
Object.setPrototypeOf = Object.setPrototypeOf ||
    function(obj, proto) {
        obj.__proto__ = proto;
        return obj;
    };
/**
 * 用了点技巧的继承,实际上返回的是Date对象
 */
function MyDate() {
    // bind属于Function.prototype,接收的参数是:object, param1, params2...
    var dateInst = new(Function.prototype.bind.apply(Date, [null].concat(Array.prototype.slice.call(arguments))))();
    // 更改原型指向,否则无法调用MyDate原型上的方法
    // ES6方案中,这里就是[[prototype]]这个隐式原型对象,在没有标准以前就是__proto__
    Object.setPrototypeOf(dateInst, MyDate.prototype);
    dateInst.abc = 1;
    return dateInst;
}
// 原型重新指回Date,否则根本无法算是继承
Object.setPrototypeOf(MyDate.prototype, Date.prototype);
MyDate.prototype.getTest = function getTest() {
    return this.getTime();
};
let date = new MyDate();
// 正常输出,譬如1515638988725
console.log(date.getTest());
로그인 후 복사
// 继承的重点语句
var dateInst = new(Function.prototype.bind.apply(Date, [null].concat(Array.prototype.slice.call(arguments))))();
// 使用经典方法实现继承的时候,由于 Date 是内部对象,使用上有限制
// 提示 “this is not a Date object”
// 说明 Date 上的方法只能由 Date 的实例调用,它会识别内部的 [[class]],浏览器无法修改。
// 所以想到了如下方案
var dateInst = new Date(...arguments);
// 能实现构造函数的只有 bind
var dateInst = new (Date.bind(null, ...arguments))();
// ES5下无法实现 ...,只能转成数组
[null].concat(Array.prototype.slice.call(arguments));
// 参数中带数组的只有 ayyly
var dateInst = new (Function.prototype.bind.apply(Date, [null].concat(Array.prototype.slice.call(arguments))))();
로그인 후 복사

이상이 이 글의 전체 내용입니다. 더 많은 관련 내용을 보시려면 PHP 중국어 웹사이트를 주목해주세요!

관련 권장사항:

기본 JS에서 Ajax 요청 기능 작성

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿