Синтаксис Javascipt не поддерживает «класс» (класс) [уже поддерживается ES6], но есть методы для имитации классов. Сегодня я в основном расскажу о методе имитации «классов» в Javascipt и резюме и обзоре наследования в JS.
Реализация «классов» и наследство в JS является как ключом, так и сложностью. Многие студенты могут иметь некоторое понимание «классов» и наследства в JS, но когда они подробно анализируют, они чувствуют, что не могут это сделать и неоднозначны.
Давайте сначала суммируем несколько методов определения «классов» от JS:
Метод 1: Метод конструктора
Этот метод является относительно классическим методом, и мы часто увидим его. При генерации экземпляра используйте новое ключевое слово. Свойства и методы класса также могут быть определены на объекте прототипа конструктора.
Функция человека (имя, возраст, задание) {this.name = name; this.age = возраст; this.job = job;} person.prototype.sayname = function () {alert (this.name);} var person1 = новый человек ("zhang san", "29", "Manager web frontpage"); var person2 = новый человек ("li si", "22", "Доктор"); Person1.sayname (); // pop "zhang san" console.log (person2.name) // вывод "li si"Метод 2: object.create () Метод
Method object.creat () в качестве альтернативы новому оператору выпускается только после ES5. Используя этот метод, «класс» является объектом, а не функцией.
var mymammal = {name: 'hrab the marmal', get_name: function () {return this.name; }, говорит: function () {return this.saying || ''; }} var mycat = object.create (mymammal); mycat.name = 'henrietta'; mycat.saying = 'meow'; mycat.get_name = function () {console.log (this.says + '' + this.name + this.says);} mycat.get_name ();Выход:
function () {return this.saying || ''; } HenrietTafunction () {return this.saying || ''; }В настоящее время последние версии крупных браузеров (включая IE9) развернули этот метод. Если вы столкнетесь с старым браузером, вы можете использовать следующий код для развертывания самостоятельно.
if (! object.create) {object.create = function (o) {function f () {} f.prototype = o; вернуть новый f (); }; }Метод 3: Минималистский закон
Упаковка
Этот метод не использует это и прототип, и код очень прост в развертывании. Прежде всего, он также использует объект для имитации «класса». В этом классе определите конструктор CreateFn () для создания экземпляра.
var dog = {createfn: function () {// какой -то код здесь}};Затем, в createfn (), определите объект экземпляра и используйте этот объект экземпляра в качестве возвращаемого значения.
var dog = {createfn: function () {var dog = {}; dog.name = "собака"; dog.makesound = function () { Alert ("woofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofww oofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwo ofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwo ofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoooo fwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoo fwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoof woofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofww oofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoПри использовании метода CreateFn (), чтобы получить объект экземпляра.
var dog1 = dog.creatfn (); dog1.makesound (); // Вуф
Преимущество этого подхода состоит в том, что его легко понять, имеет четкую и элегантную структуру и соответствует традиционной конструкции «объектно-ориентированное программирование», так что следующие функции могут быть легко развернуты.
наследовать
Очень удобно внедрить один класс в следующем классе. Просто назовите метод CreateFn () последнего в методе CreateFN (). Сначала определите класс животных.
var Animal = {createFN: function () {var Animal = {}; Animal.eat = function () {alert ("едой"); }; возвращение животного; }};Затем, в методе Dog's CERTERFN (), метод Animal CreateFN () называется.
var dog = {createfn: function () {var dog = Animal.Creatfn (); dog.name = "собака"; dog.makesound = function () {alert ("wangwoo"); }; возвращение собаки; }};Экземпляр собаки, полученный таким образом, будет унаследовать класс собак и класс животных одновременно.
var dog1 = dog.creatfn (); Dog1.eat (); // едят еду
Частные свойства и частные методы
В методе CreateFN (), если методы и свойства, которые не определены на объекте собаки, являются частными.
var dog = {createfn: function () {var dog = {}; var sound = "woof woof"; dog.makesound = function () {alert (sound); }; возвращение собаки; }};Внутренний звук переменной в приведенном выше примере не может быть считывается извне, и может быть прочитано только через публичный метод makeound () собаки.
var dog1 = dog.creatfn (); блюд (Dog1.sound); // неопределенный
Обмен данными
Иногда нам нужны все объекты экземпляра, чтобы иметь возможность читать и писать одни и те же внутренние данные. В настоящее время просто инкапсулирует эти внутренние данные внутри объекта класса и за пределами метода createFN ().
var dog = {sound: "wowangwoo", createfn: function () {var dog = {}; dog.makesound = function () {alert (dog.sound); }; dog.changesound = function (x) {dog.sound = x; }; возвращение собаки; }};Затем генерируются два объекта экземпляра:
var dog1 = dog.creatfn (); var dog2 = dog.creatfn (); dog1.makesound (); // Вуф
В настоящее время, если есть объект экземпляра, и общие данные изменяются, также будет затронут другой объект экземпляра.
Dog2.Changesound ("wuwuwu"); dog1.makesound (); // wuwuwuwuJS наследство
Что касается наследования, то есть также много информации, доступной для запроса в Интернете, но многие друзья не понимают его достаточно глубоко. Когда дело доходит до наследства, если вы не проверяете информацию и внезапно, возможно, не сможете указать причину. Это показывает, что наши основные знания недостаточно прочные. Не тщательно понято. Сегодня я стою на основе своих предшественников и давайте рассмотрим это наследство с вами.
Два наиболее часто используемых метода наследования следующие:
Прототип цепочка наследования
Что такое прототип цепочка наследования? Я не буду говорить о определении здесь. Фактически, он должен использовать прототип для наследства родительского уровня.
Например:
function Parent(){ this.name = 'mike';} function Child(){ this.age = 12;}Child.prototype = new Parent();//Child inherits Parent and forms a chain through the prototype var test = new Child();alert(test.age);alert(test.name);//Get inherited attributes//Continue the prototype chain inheritance function Brother(){ //Brother constructs this.weight = 60;} Brother.prototype = new Child (); // продолжить прототип цепочки наследует var brother = new Brother (); alert (brother.name); // наследует родитель и ребенок, Mikealert (Brother.age); // pop 12В приведенном выше примере, через прототип, образуется цепь. Ребенок наследует родитель. Брат наследует ребенка. Наконец, у брата есть как атрибуты ребенка, так и родителя, а также свои собственные атрибуты. Это наследование оригинальной цепи.
Классическое наследование (конструктор заимствования)
Классическое наследование обычно использует вызов или применить для вызова супертипа конструктора внутри. Например:
Функция родина (возраст) {this.name = ['mike', 'jack', 'smith']; this.age = age;} функция функции Child (возраст) {parent.call (this, age);} var test = new gild (21); alert (test.age); // 21alert (test.name); // mike, jack, smithtest.name.push ('bill'); alert (test.name);Вышеупомянутые два наследства являются самыми основными методами наследования.
Кроме того, есть некоторые методы наследования, давайте посмотрим!
Комбинация наследования
Комбинация наследования обычно является методом наследования, используемого в сочетании двух вышеупомянутых методов наследования.
В качестве примера:
Функция родина (возраст) {this.name = ['mike', 'jack', 'smith']; this.age = age;} parent.prototype.run = function () {return this.name + 'with' + this.age;}; function child (age) {parent.call (this, age); // Оправление объекта, передача аргументов Supertype} Child.prototype = new Parent (). // Prototype var -test = var var var =/////////edo prototype var var test =////21); Alert (test.run ()); // Майк, Джек, Смит оба 21Прототип наследование
Это только одно слово, отличное от исходного наследования цепочки, упомянутого выше, но это не тот же контент. То, о чем мы говорим о прототипе наследования, - это то, о чем мы говорили в последнем классе, создав новый класс с помощью метода object.create (). Потому что этот метод не поддерживается старыми браузерами. Поэтому, если мы не используем object.create (), также может быть альтернативный метод следующим образом:
Функция obj (o) {function f () {} f.prototype = o; вернуть новый f (); }Эта функция реализует способ создания класса в object.create ()!
Поэтому следующее:
Функция obj (o) {function f () {} f.prototype = o; вернуть новый f (); } var box = {name: 'trigkit4', arr: ['brother', 'сестра', 'baba']}; var b1 = obj (box); alert (b1.name); // trigkit4b1.name = 'mike'; ulert (b1.name); // mikealert (b1.arr); // брат, сестра, бабаб1.ar.push ('родители); alert (b1.arr); // брат, сестра, Баба, родители b2 = obj (box); блюд (b2.name); // trigkit4alert (b2.Паразитическое наследование
В качестве примера:
Функция Creatanother (Original) {var clone = new Object (Original); clone.sayhi = function () {alert ("hi")}; return Clone;} var person = {name: "haorooms", друзья: ["hao123", "Zhansan", "lisi"]} var oreverperson = creatanother (человек); Antherperson.sayhi (); // hiПаразитическая комбинация
функция inheritprototype (subtype, supertype) {var prototype = object.creat (supertype.prototype); prototype.constructor = subtype; subtype.prototype = prototype;}; function supertype (name) {this.name = name; this.colors = ['red', 'blue', 'green'];} supertype.prototype.sayname = function () {console.log (this.name);} функция подтипа (имя, возраст) {//inheritprototype.call(This,Name); this.age = age;} // inheritprototype (subtype, supertype); subtype.prototype.sayage = function () {console.log (this.age);} var exance = new subtype ();Классовое наследование - это в основном вышеупомянутые методы. Давайте кратко поговорим о классе ES6!
ES6 Класс реализации
// определить точку класса класса {Constructor (x, y) {this.x = x; this.y = y; } toString () {return '('+this.x+','+this.y+')'; }} var point = new point (2, 3); point.toString () // (2, 3) point.hasownproperty ('x') // truepoint.hasownproperty ('y') // truepoint.hasownproperty ('tostring') // falsepoint .__ Proto __.Наследство класса
Class Colorpoint Extends Point {Constructor (x, y, color) {super (x, y); // вызовать конструктор (x, y) родительского класса this.color = color; } toString () {return this.color + '' + super.toString (); // Вызовите ToString () родительского класса}}