javascript ---> Object.create reading

Explanation

• When reading koa source today, encounter Object.create, feeling a little rusty on this concept, then opened the MDN re-sort
• Portal

Object.create()

• Apply directly to the official website of chestnuts

const person  = {
	isHuman: false,
	printIntroduction: function () {
		console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
	}
}
const me = Object.create(person);
console.log(me);

• I explained above创建一个新对象,使用现有的对象来提供新创建的对象的__proto__
• That did two things:

1. Create a new object.
2. The original object properties and methods on the new object properties __proto__

benefit

• Personally I think that solve the problem of shallow copy of the object assignment
• Because javascript object type is a reference type ( "JavaScript Advanced Programming" (third edition)), if a normal assignment method, as follows:

const me = person;
me.isHuman = true;
console.log(person.isHuman);

We can see, we operate on me, and a direct impact on the person.

---

Use Object.create to achieve class-style inheritance

• First find javascript, class inheritance actually done what things
• Suppose there Shape following categories:

class Shape {
	constructor(x, y) {
		this.x = 0;
		this.y = 0;
	}
	moved(x, y){
		this.x += x;
		this.y += y;
		console.log('Shape moved');
	}
}

• Assume Rectangle class inherits Shape

class Rectangle extends Shape{
	constructor(x, y){
		super();
	}
}
const rect = new Rectangle();
const shape = new Shape();
console.log('rect', rect);
console.log('shape', shape);

• The print them out, to see things done in the end inherit
  
• can be seen:

1. Rectangle's constructor function is called Shape
2. Rectangle prototype prototype prototype inherits Shape

---

• To implement the Shape class

function Shape (x, y) {
	this.x = 0;
	this.y = 0;
}
Shape.prototype.moved = function (x, y){
	this.x += x;
	ths.y += y;
	console.log('Shape moved');
}
const shape = new Shape();
console.log('shape', shape);

• Shape and scope is bound to call the current scope in the Rectangle class, you can achievethis.x =0; this.y = y

function Rectangle (x, y) {
	Shape.apply(this);
}
const rect = new Rectangle();
console.log('rect');

There are two points not resolved:
3. Shape not found along the Rectangle constructor prototype chain
4. moved method is not inherited

I think Object.create method is to create a new object, and the object's properties and methods that are hanging __proto__on property, inheritance scheme are as follows:

Rectangle.prototype = Object.create(Shape.prototype);
const rect = new Rectangle();
console.log('rect', rect);

We can see, basically inherited a success, but the Rectangle constructor (constructor) lost. Only need to bring to

Rectangle.prototpe.constructor = Rectangle;

---

to sum up

• If you want an object to inherit another object for all properties and methods, and the operation of the new object will not affect the original object. Object.create can be used to assign values.
• When an object can not be found in the method that will follow the prototype chain (prototype, the browser displays is __proto__) looking for step by step.