Illustration of the Object.create method in js (with code example)

This article introduces you to the new Object.create() method in ECMAScript 5. For those who don’t know, you are welcome to collect and learn~

##ECMAScript 5 New The

Object.create() method has been added to standardize the concept of prototypal inheritance [Recommended learning: JavaScript video tutorial]

Usage

var obj = Object.create({name: 'johan', age: 23}) // obj 继承了属性name 和 age
var obj2 = Object.create(null) // obj2 不继承任何属性和方法
var obj3 = Object.create(Object.prototype) // 与 {} 和 new Object() 一个意思
var obj4 = Object.create({}, {
    property1: {
        value: true,
        writable: true
    }
}) // 第二个参数与 Object.defineProperties() 一致
图解 Object.create 实现
function create(proto) {
    function F(){}
    F.prototype = proto
    return new F()
}

The first step:

function F(){}

That is, create a function. Because the first letter is capitalized by convention, it is regarded as a constructor. When creating function F, F constructor There is this relationship between a function and its prototype object:

F.prototype === F.prototype; // 假设你把F.prototype当作一个值
F.prototype.constructor === F;

Step 2:

F.prototype = proto

Assign F.prototype to the incoming proto, thus breaking F.prototype = F.prototype and F.prototype.constructor = F. Their relationship is

The third step:

return new F()

The interpretation of the third step is a bit confusing, because it involves the operation of new. We said in new changed the object, new will create an object and point the object's implicit prototype (__proto__) to the prototype object of the constructor, initialize the constructor, and return the value if it is a value. We will also introduce in the subsequent prototypes that new is implicit prototypal inheritance, and Object.create is explicit prototypal inheritance.

Here, we interpret return new F() according to the way new is implemented. The __proto__ of the instance after new F points to F.prototype, and this value has been pointed to the passed proto in the second step, so there is new F().__proto__ = proto

Maybe you still don’t know the third step clearly. Let’s combine it with examples to make it clear at a glance.

var obj = Object.create({name: 'johan'})

The illustration of the third step becomes like this:

This is it, obj inherits from the object {name: johan}, as for F.prototype = {name: 'johan'}, after calling Object.create, because no one uses it The F function was treated as garbage collection by the engine, and became obj.__proto__ = {name: 'johan'}

In this way, "prototypal inheritance" is passed down

The principle That's it. To put it simply, it is to create an empty (constructor) function and associate its prototype (implement inheritance)

Object.create(null)

When reading the source code, you will often see Object.create(null), use this to initialize a new Object, as for why this method is used instead of new Object or {}, it is because both new and literal are inherited from the Object constructor, and using Object.create(null) can get an object without any trace of inheritance

var obj = Object.create(null)

If you don’t believe it, you can try printing obj

The above is the detailed content of Illustration of the Object.create method in js (with code example). For more information, please follow other related articles on the PHP Chinese website!