原型链

1let animal = {
2  eats: true,
3  walk() {
4    alert("Animal walk");
5  }
6};
7
8let rabbit = {
9  jumps: true,
10  __proto__: animal
11};
12
13let longEar = {
14  earLength: 10,
15  __proto__: rabbit
16};
17
18// walk 是通过原型链获得的
19longEar.walk(); // Animal walk
20alert(longEar.jumps); // true（从 rabbit）

1let obj = {};
2
3alert(obj.__proto__ === Object.prototype); // true

1let arr = [1, 2, 3];
2
3// 它继承自 Array.prototype？
4alert( arr.__proto__ === Array.prototype ); // true
5
6// 接下来继承自 Object.prototype？
7alert( arr.__proto__.__proto__ === Object.prototype ); // true
8
9// 原型链的顶端为 null。
10alert( arr.__proto__.__proto__.__proto__ ); // null

1function f() {}
2
3alert(f.__proto__ == Function.prototype); // true
4alert(f.__proto__.__proto__ == Object.prototype); // true，继承自 Object

1let obj = {};
2
3let key = prompt("What's the key?", "__proto__");
4obj[key] = "some value";
5
6alert(obj[key]); // [object Object]，并不是 "some value"！

1let obj = {};
2
3let key = prompt("What's the key?", "__proto__");
4obj[key] = new String("some value");
5
6alert(obj[key]); // 这里却会是 "some value"！

1let animal = {
2  name: "Animal",
3  eat() {         // animal.eat.[[HomeObject]] == animal
4    alert(`${this.name} eats.`);
5  }
6};
7
8let rabbit = {
9  __proto__: animal,
10  name: "Rabbit",
11  eat() {         // rabbit.eat.[[HomeObject]] == rabbit
12    super.eat();
13  }
14};
15
16let longEar = {
17  __proto__: rabbit,
18  name: "Long Ear",
19  eat() {         // longEar.eat.[[HomeObject]] == longEar
20    super.eat();
21  }
22};
23
24// 正确执行
25longEar.eat();  // Long Ear eats.

1let animal = {
2  eat: function() { // 这里是故意这样写的，而不是 eat() {...
3    // ...
4  }
5};
6
7let rabbit = {
8  __proto__: animal,
9  eat: function() {
10    super.eat();
11  }
12};
13
14rabbit.eat();  // 错误调用 super（因为这里没有 [[HomeObject]]）

1class PowerArray extends Array {
2  isEmpty() {
3    return this.length === 0;
4  }
5
6  // 内建方法将使用这个作为 constructor
7  static get [Symbol.species]() {
8    return Array;
9  }
10}
11
12let arr = new PowerArray(1, 2, 5, 10, 50);
13alert(arr.isEmpty()); // false
14
15// filter 使用 arr.constructor[Symbol.species] 作为 constructor 创建新数组
16let filteredArr = arr.filter(item => item >= 10);
17
18// filteredArr 不是 PowerArray，而是 Array
19alert(filteredArr.isEmpty()); // Error: filteredArr.isEmpty is not a function

1function Rabbit() {}
2let rabbit = new Rabbit();
3
4// 修改了 prototype
5Rabbit.prototype = {};
6
7// ...再也不是 rabbit 了！
8alert( rabbit instanceof Rabbit ); // false

1let s = Object.prototype.toString;
2
3alert( s.call(123) ); // [object Number]
4alert( s.call(null) ); // [object Null]
5alert( s.call(alert) ); // [object Function]

1let user = {
2  [Symbol.toStringTag]: "User"
3};
4
5alert( {}.toString.call(user) ); // [object User]

1const user = {};
2
3// A malicious script:
4Object.prototype.authenticated = true;
5
6// Unexpectedly allowing unauthenticated user to pass through
7if (user.authenticated) {
8  // access confidential data...
9}
10Copy to Clipboard

1// Shape - superclass
2function Shape() {
3  this.x = 0;
4  this.y = 0;
5}
6
7// superclass method
8Shape.prototype.move = function(x, y) {
9  this.x += x;
10  this.y += y;
11  console.info('Shape moved.');
12};
13
14// Rectangle - subclass
15function Rectangle() {
16  Shape.call(this); // call super constructor.
17}
18
19// subclass extends superclass
20Rectangle.prototype = Object.create(Shape.prototype);
21
22//If you don't set Rectangle.prototype.constructor to Rectangle,
23//it will take the prototype.constructor of Shape (parent).
24//To avoid that, we set the prototype.constructor to Rectangle (child).
25Rectangle.prototype.constructor = Rectangle;
26
27const rect = new Rectangle();
28
29console.log('Is rect an instance of Rectangle?', rect instanceof Rectangle); // true
30console.log('Is rect an instance of Shape?', rect instanceof Shape); // true
31rect.move(1, 1); // Outputs, 'Shape moved.'

1let o;
2
3// create an object with null as prototype
4o = Object.create(null);
5
6o = {};
7// is equivalent to:
8o = Object.create(Object.prototype);
9
10// Example where we create an object with a couple of
11// sample properties. (Note that the second parameter
12// maps keys to *property descriptors*.)
13o = Object.create(Object.prototype, {
14  // foo is a regular 'value property'
15  foo: {
16    writable: true,
17    configurable: true,
18    value: 'hello'
19  },
20  // bar is a getter-and-setter (accessor) property
21  bar: {
22    configurable: false,
23    get: function() { return 10; },
24    set: function(value) {
25      console.log('Setting `o.bar` to', value);
26    }
27/* with ES2015 Accessors our code can look like this
28    get() { return 10; },
29    set(value) {
30      console.log('Setting `o.bar` to', value);
31    } */
32  }
33});
34
35function Constructor() {}
36o = new Constructor();
37// is equivalent to:
38o = Object.create(Constructor.prototype);
39// Of course, if there is actual initialization code
40// in the Constructor function,
41// the Object.create() cannot reflect it
42
43// Create a new object whose prototype is a new, empty
44// object and add a single property 'p', with value 42.
45o = Object.create({}, { p: { value: 42 } });
46
47// by default properties ARE NOT writable,
48// enumerable or configurable:
49o.p = 24;
50o.p;
51// 42
52
53o.q = 12;
54for (const prop in o) {
55  console.log(prop);
56}
57// 'q'
58
59delete o.p;
60// false
61
62// to specify an ES3 property
63o2 = Object.create({}, {
64  p: {
65    value: 42,
66    writable: true,
67    enumerable: true,
68    configurable: true
69  }
70});
71/* is not equivalent to:
72This will create an object with prototype : {p: 42 }
73o2 = Object.create({p: 42}) */