Может кто-то объяснять JavaScript prototypal наследование

Я думаю, вы хотели установить что-то равное new animate () где-нибудь в вашем примере. Без использования new я немного поясню, что происходит:

var animate = function(){ console.log(0, 'animate'); };
animate.angular = function(){ console.log(1, 'animate.angular'); };
animate.circular = function(){ console.log(2, 'animate.circular'); };

animate.prototype.angular = function(){ console.log(3, 'animate.prototype.angular'); };
animate.prototype.circular = function(){ console.log(4, 'animate.prototype.circular'); };

Только первые две функции, # 1 и # 2, могут быть вызваны из переменной animate.

animate.angular();
animate.circular();

Если вы создаете ] new animate () , вы можете вызвать следующие два, # 3 и # 4, (но не # 1 или # 2).

var ani2 = new animate();

ani2.angular();
ani2.circular();

Также, animate () является функцией, а ani2 - нет.

console.log(5, typeof animate);
console.log(6, typeof ani2);
console.log(7, animate());

Хотя ani2 уже создан, вы можете добавлять к нему новые члены с помощью animate.prototype.

animate.prototype.bark = function(){ console.log(8, 'bark'); };
ani2.bark();

Однако переменная animate не наследует от своего прототипа.

console.log(9, typeof ani2.bark);
console.log(10, typeof animate.bark);

Обратите внимание, что ani2 не наследует члены, примененные непосредственно к анимировать переменную. Он наследуется только от animate.prototype.

animate.paperclip = function(){ console.log(11, "paperclip"); };

animate.paperclip();
console.log(12, typeof ani2.paperclip);
console.log(13, typeof animate.paperclip);

Вы также можете использовать ключевое слово this внутри функции конструктора, например animate, для добавления членов экземпляра в new потомков.

var Anime = function(a,b){ this.a=a; this.b=b; this.c=console; };
var anime1 = new Anime(14, 'anime1');
var anime2 = new Anime(15, 'anime2');
anime1.c.log(anime1.a, anime1.b);
anime2.c.log(anime2.a, anime2.b);

Anime.prototype.a = 16;
Anime.prototype.z = 'z';

var anime3 = new Anime(17, 'anime3');
anime3.c.log(18, anime3.a, anime3.b, anime3.z, " ", anime2.a, anime2.b, anime2.z, " ", anime1.a, anime1.b, anime1.z);
anime2.z='N';
anime3.c.log(19, anime3.a, anime3.b, anime3.z, " ", anime2.a, anime2.b, anime2.z, " ", anime1.a, anime1.b, anime1.z);

Память была автоматически выделена для отдельного экземпляра anime2 .z только потому, что он был изменен, anime1 и anime3 по-прежнему "разделяют" бережливое немодифицированное z.

Члены a, b и c не являются "общими" таким же образом. Они были выделены немедленно с помощью this в конструкторе new Anime () (не унаследовано от Anime.prototype). Кроме того, член a в прототипе всегда будет «индивидуализирован» конструктором.

Никогда не забывайте ключевое слово new , иначе ни одно из них не работает должным образом. Например, this указывает на глобальный объект в конструкторе, вызываемом без new .

console.log(20, typeof window.a, typeof window.b, typeof window.c);
var opps = Anime(21, 'zapp');
console.log(22, typeof window.a, typeof window.b, typeof window.c);
console.log(23, typeof opps);

Вот результат. И второе за то, что Том предлагает видео Дугласа Крокфорда!

/*
1 animate.angular
2 animate.circular
0 animate
3 animate.prototype.angular
4 animate.prototype.circular
5 function
6 object
0 animate
7 undefined
8 bark
9 function
10 undefined
11 paperclip
12 undefined
13 function
14 anime1
15 anime2
18 17 anime3 z 15 anime2 z 14 anime1 z
19 17 anime3 z 15 anime2 N 14 anime1 z
20 undefined undefined undefined
22 number string object
23 undefined
*/