Клас проти статичного методу в JavaScript

Я знаю, що це спрацює:

function Foo() {};
Foo.prototype.talk = function () {
    alert('hello~\n');
};

var a = new Foo;
a.talk(); // 'hello~\n'

Але якщо я хочу зателефонувати

Foo.talk() // this will not work
Foo.prototype.talk() // this works correctly

Я знаходжу деякі методи, щоб зробити Foo.talkроботу,

1. Foo.__proto__ = Foo.prototype
2. Foo.talk = Foo.prototype.talk

Чи є інші способи зробити це? Я не знаю, чи правильно це робити. Чи використовуєте у своєму коді JavaScript методи класу чи статичні методи?

По-перше, пам’ятайте, що JavaScript - це передусім прототипна мова , а не мова на основі класу ¹ . Fooце не клас, це функція, яка є об'єктом. Ви можете створити об'єкт із цієї функції за допомогою newключового слова, яке дозволить вам створити щось подібне до класу на стандартній мові OOP.

Я б запропонував ігнорувати __proto__більшу частину часу, тому що він має погану підтримку перехресного веб-переглядача, а замість цього зосередитись на вивченні того, як prototypeпрацює.

Якщо у вас є примірник об'єкта, створеного з функції ^2, і ви будь-яким чином отримуєте доступ до одного з його членів (методів, атрибутів, властивостей, констант тощо), доступ буде протікати вниз по ієрархії прототипу, поки він (a) не знайде член, або (b) не знайде іншого прототипу.

Ієрархія запускається на об'єкт, який був викликаний, а потім здійснює пошук його об’єкта-прототипу. Якщо об'єкт прототипу має прототип, він повторюється, якщо прототип не існує, undefinedповертається.

Наприклад:

foo = {bar: 'baz'};
console.log(foo.bar); // logs "baz"

foo = {};
console.log(foo.bar); // logs undefined

function Foo(){}
Foo.prototype = {bar: 'baz'};
f = new Foo();
console.log(f.bar);
// logs "baz" because the object f doesn't have an attribute "bar"
// so it checks the prototype
f.bar = 'buzz';
console.log( f.bar ); // logs "buzz" because f has an attribute "bar" set

Мені здається, ви вже хоча б дещо зрозуміли ці "основні" частини, але мені потрібно зробити їх явними лише для того, щоб бути впевненим.

У JavaScript все є об'єктом ³ .

все є об’єктом.

function Foo(){}не просто визначає нову функцію, вона визначає новий об’єкт функції, до якого можна отримати доступ Foo.

Ось чому ви можете отримати доступ Fooдо прототипу за допомогою Foo.prototype.

Те , що ви також можете зробити , це встановити додаткові функції по Foo:

Foo.talk = function () {
  alert('hello world!');
};

Доступ до цієї нової функції можна за допомогою:

Foo.talk();

Я сподіваюся, що зараз ви помітили подібність між функціями на об’єкті функції та статичним методом.

Розгляньте це f = new Foo();як створення екземпляра класу, Foo.prototype.bar = function(){...}як визначення загального методу для класу та Foo.baz = function(){...}як визначення публічного статичного методу для класу.

ECMAScript 2015 представила різноманітні синтаксичні цукру для таких видів декларацій, щоб зробити їх більш простими в застосуванні, а також було легше читати. Тому попередній приклад можна записати як:

class Foo {
  bar() {...}

  static baz() {...}
}

що дозволяє barназиватися як:

const f = new Foo()
f.bar()

і bazназиватися так:

Foo.baz()

_{1: classбуло "Майбутнім зарезервованим словом" у специфікації ECMAScript 5 , але ES6 запроваджує можливість визначати класи за допомогою classключового слова.}

_{2: по суті, екземпляр класу, створений конструктором, але є багато нюансованих відмінностей, які я не хочу вас вводити в оману}

_{3: примітивні значення - що включають undefined, nullбулеві числа, числа та рядки - технічно не є об'єктами, оскільки вони є мовними реалізаціями низького рівня. Булеви, числа та рядки все ще взаємодіють з ланцюгом прототипу так, ніби вони були об'єктами, тому для цілей цієї відповіді легше вважати їх "об'єктами", хоча вони не зовсім.}

Ви можете досягти цього, як показано нижче:

function Foo() {};

Foo.talk = function() { alert('I am talking.'); };

Тепер ви можете викликати функцію "розмови", як показано нижче:

Foo.talk();

Це можна зробити, оскільки в JavaScript функції також є об'єктами.

Виклик статичного методу з екземпляра:

function Clazz() {};
Clazz.staticMethod = function() {
    alert('STATIC!!!');
};

Clazz.prototype.func = function() {
    this.constructor.staticMethod();
}

var obj = new Clazz();
obj.func(); // <- Alert's "STATIC!!!"

Простий проект класу Javascript: https://github.com/reduardo7/sjsClass

Ось хороший приклад, щоб продемонструвати, як Javascript працює зі статичними / екземплярами змінних та методів.

function Animal(name) {
    Animal.count = Animal.count+1||1;// static variables, use function name "Animal"
    this.name = name; //instance variable, using "this"
}

Animal.showCount = function () {//static method
    alert(Animal.count)
}

Animal.prototype.showName=function(){//instance method
    alert(this.name);
}

var mouse = new Animal("Mickey");
var elephant = new Animal("Haddoop");

Animal.showCount();  // static method, count=2
mouse.showName();//instance method, alert "Mickey"
mouse.showCount();//Error!! mouse.showCount is not a function, which is different from  Java

У доповненнях, тепер це можливо зробити з classіstatic

'use strict'

class Foo {
 static talk() {
     console.log('talk')
 };

 speak() {
     console.log('speak')
 };

};

дасть

var a = new Foo();
Foo.talk();  // 'talk'
a.talk();    // err 'is not a function'
a.speak();   // 'speak'
Foo.speak(); // err 'is not a function'

Я використовую простори імен:

var Foo = {
     element: document.getElementById("id-here"),

     Talk: function(message) {
            alert("talking..." + message);
     },

     ChangeElement: function() {
            this.element.style.color = "red";
     }
};

І використовувати його:

Foo.Talk("Testing");

Або

Foo.ChangeElement();

ES6 підтримує зараз class& staticключові слова, як шарм:

class Foo {
    constructor() {}

    talk() {
        console.log("i am not static");
    }

    static saying() {
        console.log(this.speech);
    }

    static get speech() {
        return "i am static method";
    }

}

Якщо вам доведеться писати статичні методи в ES5, я знайшов для цього чудовий підручник:

//Constructor
var Person = function (name, age){
//private properties
var priv = {};

//Public properties
this.name = name;
this.age = age;

//Public methods
this.sayHi = function(){
    alert('hello');
}
}


// A static method; this method only 
// exists on the class and doesn't exist  
// on child objects
Person.sayName = function() {
   alert("I am a Person object ;)");  
};

дивіться @ https://abdulapopoola.com/2013/03/30/static-and-instance-methods-in-javascript/

Просто додаткові замітки. Використовуючи клас ES6, коли ми створюємо статичні методи. Двигун Javacsript встановлює атрибут дескриптора біт lil, який відрізняється від "статичного" методу старої школи

function Car() {

}

Car.brand = function() {
  console.log('Honda');
}

console.log(
  Object.getOwnPropertyDescriptors(Car)
);

він встановлює внутрішній атрибут (властивість дескриптора) для бренду () до

..
brand: [object Object] {
    configurable: true,
    enumerable: true,
    value: ..
    writable: true

}
..

у порівнянні з

class Car2 {
   static brand() {
     console.log('Honda');
   }
}

console.log(
  Object.getOwnPropertyDescriptors(Car2)
);

що встановлює внутрішній атрибут для бренду () до

..
brand: [object Object] {
    configurable: true,
    enumerable: false,
    value:..
    writable: true
  }

..

бачимо це незліченно для статичного методу в ES6 для встановлено значення false .

це означає, що ви не можете використовувати цикл for-in для перевірки об'єкта

for (let prop in Car) {
  console.log(prop); // brand
}

for (let prop in Car2) {
  console.log(prop); // nothing here
}

статичний метод в ES6 трактується як приватна власність іншого класу (ім'я, довжина, конструктор), за винятком того, що статичний метод все ще записується, тому дескриптор, що записується , встановлений на істинне { writable: true } . це також означає, що ми можемо її перекрити

Car2.brand = function() {
   console.log('Toyota');
};

console.log(
  Car2.brand() // is now changed to toyota
);

Коли ви намагаєтеся викликати Foo.talk, то JS намагається знайти функцію talkчерез __proto__та, звичайно ж , він не може бути знайдений.

Foo.__proto__є Function.prototype.

Виклики статичного методу здійснюються безпосередньо в класі і не можуть викликатись в екземплярах класу. Статичні методи часто використовуються для створення корисної функції

Досить чіткий опис

Взято безпосередньо з mozilla.org

Foo потрібно прив’язати до вашого класу. Тоді, коли ви створюєте новий екземпляр, ви можете зателефонувати myNewInstance.foo () Якщо ви імпортуєте свій клас, ви можете викликати статичний метод

Коли я стикався з такою ситуацією, я зробив щось подібне:

Logger = {
    info: function (message, tag) {
        var fullMessage = '';        
        fullMessage = this._getFormatedMessage(message, tag);
        if (loggerEnabled) {
            console.log(fullMessage);
        }
    },
    warning: function (message, tag) {
        var fullMessage = '';
        fullMessage = this._getFormatedMessage(message, tag);
        if (loggerEnabled) {
            console.warn(fullMessage);`enter code here`
        }
    },
    _getFormatedMessage: function () {}
};

тож тепер я можу зателефонувати як інфо-метод Logger.info("my Msg", "Tag");

У вашому випадку, якщо ви хочете Foo.talk():

function Foo() {};
// But use Foo.talk would be inefficient
Foo.talk = function () {
    alert('hello~\n');
};

Foo.talk(); // 'hello~\n'

Але це неефективний спосіб реалізації, використання prototypeкраще.

Інший спосіб, Мій шлях визначається як статичний клас:

var Foo = new function() {
  this.talk = function () {
    alert('hello~\n');
    };
};

Foo.talk(); // 'hello~\n'

Вище статичний клас використовувати не потрібно, prototypeоскільки він буде побудований лише один раз як статичне використання.

https://github.com/yidas/js-design-patterns/tree/master/class

У Javascript немає фактичних класів, скоріше він використовує систему прототипічного успадкування, в якій об'єкти "успадковують" від інших об'єктів через прототип ланцюга. Найкраще це пояснити через сам код:

function Foo() {};
// creates a new function object

Foo.prototype.talk = function () {
    console.log('hello~\n');
};
// put a new function (object) on the prototype (object) of the Foo function object

var a = new Foo;
// When foo is created using the new keyword it automatically has a reference 
// to the prototype property of the Foo function

// We can show this with the following code
console.log(Object.getPrototypeOf(a) === Foo.prototype); 

a.talk(); // 'hello~\n'
// When the talk method is invoked it will first look on the object a for the talk method,
// when this is not present it will look on the prototype of a (i.e. Foo.prototype)

// When you want to call
// Foo.talk();
// this will not work because you haven't put the talk() property on the Foo
// function object. Rather it is located on the prototype property of Foo.

// We could make it work like this:
Foo.sayhi = function () {
    console.log('hello there');
};

Foo.sayhi();
// This works now. However it will not be present on the prototype chain 
// of objects we create out of Foo