文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. Mind Map
    2. 2.2. an important part
    3. 2.3. where to find __proto__ and prototype?
    4. 2.4. Why __proto__?
    5. 2.5. Why prototype?
    6. 2.6. more about this
    7. 2.7. new mind map
    8. 2.8. Great Links with Function and others
  3. 3. Reference

Defined

To clear up the confusion of prototype in this which really confused me for months before. All stuff work around with this article. If you still don’t know the answer, check the link and find @daremkd‘s answer.

Main()

Keys: __proto__, prototype, prototype chain, this in prototype several examples

Mind Map

drew by the answer in refer link.
mind-map

an important part

1
2
var A = function() { this.hey = function() { alert('from A') } };
var a1 = new A()

a1.__proto__ property is assigned to point at the same thing as A.prototype points to (another empty object {} )

where to find __proto__ and prototype?

__proto__ in every Object included function.
prototype only create when function created.

Why __proto__?

-- Delegation | prototype chain (could refer prototype design pattern)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const Orin = {
result: 'I\m proto value',
say: function() {
console.log(this.result);
}
}
Orin.say()
// Im proto value
let childA = Object.create(Orin);
childA.__proto__
// {result: "Im proto value", say: ƒ}
childA.say();
// Im proto value
childA.result = 'I\'m new One';
childA.say();
// I'm new One

Attention: checkout this in this example, it will follow the Objects’ __proto__ and point it, which means it’s dynamic.

Why prototype?

-- act like a member of class-based Languagers :)

Bad way.

1
2
3
4
5
6
7
8
9
10
const A = function () {
this.say = function() {
console.log('Someone like you');
}
}
let a1 = new A();
a1.say();
let a2 = new A();
a2.say();
a1.say == a2.say // false

a1 and a2 both act like inherit the say function, BUT the result a1.say == a2.say is false.
The truth is every new instance created, say function will be create again and again, that will really drag system slow and fill up the stack / memory.

Good practice:

1
2
3
4
5
6
7
8
9
10
11
12
13
const B = function() {};
B.prototype.song = 'One is glad to be of service';
B.prototype.say = function() {
console.log(this.song);
}
let b1 = new B();
b1.say(); // One is glad to be of service
let b2 = new B();
b2.say(); // One is glad to be of service
b1.say === b2.say // true

b1.song = 'Say something';
b1.say(); // Say something

  • b1 stand for

    1
    2
    3
    4
    5
    6
    7
    8
    9
    B {
    song: "Say something"
    __proto__: {
    say: ƒ()
    song: "One is glad to be of service"
    constructor: ƒ()
    __proto__: Object
    }
    }
  • and b2

    1
    2
    3
    4
    5
    6
    7
    8
    B {
    __proto__: {
    say: ƒ()
    song: "One is glad to be of service"
    constructor: ƒ()
    __proto__: Object
    }
    }

Attention: the problem of this in prototype seems to be solved in b1 and b2 results, this is dynamic.
and the mechanism is a.__proto__ = A.prototype.

more about this

check this link out!

new mind map

This image explained the relationship among function, Function and Object. Apparently, Object is the highest Constructor.
mind-map2

new function() and new Function()

eval and Function
You should avoid eval() and new Function().

demo:

new Function() usage:
Inner variables scope is Global

new Function(param1, param2[, …], functionBody);

Reference

Use of ‘prototype’ vs. ‘this’ in JavaScript? - stackoverflow
different way to create object

文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. Mind Map
    2. 2.2. an important part
    3. 2.3. where to find __proto__ and prototype?
    4. 2.4. Why __proto__?
    5. 2.5. Why prototype?
    6. 2.6. more about this
    7. 2.7. new mind map
    8. 2.8. Great Links with Function and others
  3. 3. Reference