Прочитав его, я знаю, что наследование — это то же самое.

внешний интерфейс

предисловие

Все большие ребята здесь, найдите минутку, чтобы прочитать это, и будьте осторожны после прочтения, иначе у вас не будет мотивации продолжать писать, ха-ха

Начинать

Предварительные знания

Знание цепочки прототипов--- Не говорите больше о картинке, картинка стоит тысячи слов

Теперь давайте напишем базовый пример функции, чтобы объяснить картину.

function Test () {
    this.name = 'test'; 
}
var fn = new Test;
console.log(fn.name);
//我们称Test为构造函数  fn为构造函数Test的实例
//Test的prototype（原型）和实例的__proto__（原型）都指向了原型同一个原型对象  
//原型对象的constructor指向了构造函数

Object.createВот еще одна картинка, чтобы ясно объяснить, что он делает

Начнем играть с наследованием

Первый класс простейшего наследования --- прототипное наследование

// 原型继承
function A() {
    this.x = 'test';
}

A.prototype.getX = function () {
    console.log(this.x);
    
};

function B() {
    this.y = 'test2';
}

B.prototype = new A;
var fn = new B;
console.log(fn.x);//=>test
console.log(fn.y);//=>test2
fn.getX();//=>test

Суммировать

Вот и всеэкземпляр B fnУнаследовал все свойства и методы родительского класса (A). Мы называем собственные свойства и методы A (x) какчастная собственность, вызываются методы и свойства (getX) прототипа родительского класса (A).общественная собственность.Этот метод наследования заключается в том, чтобы наследовать общедоступные свойства и частные свойства родительского класса (A) в общедоступные свойства подкласса (B)..

преимущество: Простой и практичный

недостаток: потому что только изменение точки прототипа приводит к тому, что конструктор указывает на A, и все они становятся их собственными общедоступными свойствами.

способы улучшения

// 原型继承
function A() {
    this.x = 'test';
}

A.prototype.getX = function () {
    console.log(this.x);
    
};

function B() {
    this.y = 'test2';
}

B.prototype = new A;
B.prototype.constructor = B;//手动改变constructor
var fn = new B;
console.log(fn.x);//=>test
console.log(fn.y);//=>test2
fn.getX();//=>test

Второй призыв Чтобы изменить использование этой точки, чтобы позвонить наследуемое ----

// call继承
function A() {
    this.x = 'test';
}

A.prototype.getX = function () {
    console.log(this.x);

};

function B() {
    this.y = 'test2';
    A.call(this);
}

var fn = new B;
console.log(fn.x);//=>test
console.log(fn.y);//=>test2

Суммировать

Вот и всеэкземпляр B fnУнаследовал частные свойства и методы в A.Этот метод наследования заключается в том, чтобы наследовать частное свойство A в частное свойство B..

преимущество:Простой

недостаток: может наследовать только частные свойства родительского класса

Третье свойство копирования для достижения наследования --- претендует на наследование объектов

//冒充对象继承
function A() {
    this.x = 'test';
}

A.prototype.getX = function () {
    console.log(this.x);

};

function B() {
    this.y = 'test2';
    var temp = new A;
    for (key in temp) {
        // this=>实例fn
        this[key] = temp[key];
    }
    temp = null;
}
var fn = new B;
console.log(fn.x);//=>test
console.log(fn.y);//=>test2

Суммировать

Вот и всеэкземпляр B fnУнаследовал частные свойства и методы в A.Этот метод наследования заключается в том, чтобы наследовать частное свойство A в частное свойство B..

недостаток: может наследовать только частные свойства родительского класса

Четвертое смешанное наследование

//混合模式继承
function A() {
    this.x = 'test';
}

A.prototype.getX = function () {
    console.log(this.x);

};

function B() {
    this.y = 'test2';
    A.call(this);
    
}

B.prototype = new A;
B.prototype.constructor = B;//手动改变constructor
var fn = new B;
console.log(fn.x);//=>test
console.log(fn.y);//=>test2
fn.getX();//=>test

Суммировать

Вот и всеэкземпляр B fnВсе свойства и методы в A наследуются.Этот метод наследования заключается в том, чтобы наследовать общедоступные свойства и частные свойства родительского класса (A) в общедоступные свойства подкласса (B) и наследовать частные свойства родительского класса в частные свойства подкласса..

преимущество: очень всеобъемлющий

недостаток: Поскольку изменяется только указатель прототипа, конструктор все указывает на родительский класс (A), а частные свойства родительского класса копируются дважды.

Пятый шаблон создания наследования

//Create模式继承
function A() {
    this.x = 'test';
}

A.prototype.getX = function () {
    console.log(this.x);

};

function B() {
    this.y = 'test2';
    A.call(this);

}

B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;//手动改变constructor
var fn = new B;
console.log(fn.x);//=>test
console.log(fn.y);//=>test2
fn.getX();//=>test

Суммировать

Вот и всеэкземпляр B fnВсе свойства и методы в A наследуются. ** Этот метод наследования заключается в том, чтобы наследовать общедоступные и частные свойства родительского класса (A) общедоступным свойствам и частным свойствам подкласса (B) соответственно.

преимущество: очень всеобъемлющий

недостаток:Метод Object.create не поддерживает IE6 7 8

Улучшено до совместимой версии

//Create模式继承  兼容
function A() {
    this.x = 'test';
}

A.prototype.getX = function () {
    console.log(this.x);

};

function B() {
    this.y = 'test2';
    A.call(this);

}

B.prototype = myCreate(A.prototype);
B.prototype.constructor = B;//手动改变constructor
var fn = new B;
console.log(fn.x);//=>test
console.log(fn.y);//=>test2
fn.getX();//=>test

function myCreate (o) {
    function fn () {}
    fn.prototype = o ;
    return new fn;
}

Суммировать

Каждый метод имеет свои преимущества и недостатки, для простоты рекомендуется использовать первый, но предпочтительнее последний.

Статью написать не просто, надеюсь, вы, братья, сестры и старшие братья, будете осторожны.

Категории