Four ways to create objects in JavaScript

This article mainly introduces the four ways to create objects in JavaScript, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

Keywords

Object.create; new Object(); new Fn(); {}

Background

##This paragraph can be skipped and not read... In daily use, the most common way to create an object is to create it directly using {}, where you can directly write methods and properties; but in one practice, the object created in this way was written in another js file. , I don’t know how to use it in HTML. Baidu used the Object.create method after a long time. Unexpectedly, it encountered a new pitfall. This method only supports ES5 and above. In lower versions, compatibility processing is required. Now it will These methods of creating objects are organized for easy reference in the future.

Method 1: Object.create

1. Syntax

var newObj = Object.create(proto, propertyObject);

Parameters:
proto: new Create the prototype object of the object
propertyObject: The enumerable property of the newly created object, equivalent to the second parameter in Object.defineProperty()
Return value: The newly created object

var aa = {
    valA:1, 
    fnA: function(){console.log(this.valA)}
};

var bb = Object.create(aa, {
  // foo会成为所创建对象的数据属性
  foo: { 
    writable:true,
    configurable:true,
    value: "hello" 
  },
  // bar会成为所创建对象的访问器属性
  bar: {
    configurable: false,
    get: function() { return 10 },
    set: function(value) {
      console.log("Setting `o.bar` to", value);
    }
  }
});

The result is: The attributes that bb can access are:

(1) its own foo and bar
(2) aa's valA and fnA

and, bb.__proto__ == aa

2.polyfill

For browsers below ES5 that do not support this method, you can use the following method for compatibility, which is also the polyfill of Object.create;

if (typeof Object.create !== "function") {
  Object.create = function (proto, propertiesObject) {
      if (typeof proto !== 'object' && typeof proto !== 'function') {
          throw new TypeError('Object prototype may only be an Object: ' + proto);
      } else if (proto === null) {
          throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");
      }
      if (typeof propertiesObject != 'undefined') throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");
      function F() {}
      F.prototype = proto;
      return new F();
  };
}

In short, remember one sentence, the prototype of the new object is proto, and proto is the first parameter of Object.create

3. Easter eggs

Two bonus pieces are included The picture may be useful, 锵锵锵~~~~

##Okay, in case the picture cannot be opened, the picture First, the new object methods in ES5 include create&keys and defineProperty, String methods include trim, and array methods include indexOf, filter&map, and foreach. Figure 2 is a browser that supports ES5. Chrome supports it well, but IE can only support it better in IE11;

Method 2: new constructor

This method It is also very commonly used, especially for inheritance and so on. It has better scalability and encapsulation.

function Person(){
    this.name = '****';
    this.age = 11,
    this.getAge = function(){}
}

You can use

var p = new Person();

to print out p

{
    name: '****';
    age: 11,
    getAge: function(){},
    __proto__: Object
}
pp.constructor == Person  ==> **true**
Person.__proto__ == Function.prototype   ==> **true**

Method 3: new Object()

1. Create an empty object

var obj = new Object();

Equivalent to

var obj = {};

You can continue to extend properties and methods

2.

var aa = {
    valA:1, 
    fnA: function(){console.log(this.valA)}
};
var oo = new Object(aa);

The result is:

oo === aa    ==> true
oo.valA = 2;
console.log(aa.valA)   ==> 2

It means that oo is a shallow copy of aa, which is the same as direct copying of the object.

I don’t know why I want to test like this. . . .

This method is similar to new Person because:

Object.__proto__ == Function.protoType

Person.__proto__ == Function.protoType
Object Is the constructor of the object, and its prototype object is also the prototype of Function

Method 4: {}

This method is called:

Use object literals to create objects

, this This is the simplest way and the one I often use to simplify the process of creating objects with a large number of properties.

var person = {
   name: '*****',
   age: 11,
   getAge: function(){
    return this.age;
   },
   setAge: function(newAge){
    this.age = newAge;
   } 
}
调用时：
person.name
person['name']
扩展属性时：
person.hairColor = 'black';
person.getName = function(){};

Someone has done tests,

This method is faster than using new Object() to create objects, because {} is evaluated immediately, and new Object() is essentially a method. Since it is Method involves traversing the method in the prototype. When the method is found, the stack information necessary to call the method will be generated. After the method call is completed, the stack information must be released, so it will be slower.

Summary

These are several commonly used ways to create objects. The ones I commonly use are method four and method two. Method four is more direct and fast, and method two is often used to do Inheritance and the like; the first method needs to consider the issue of compatibility with ES5. It can extend the enumerable properties of some new objects. I always feel that it has some connection with defineProperty, but I don’t quite understand it yet. Please give me some advice.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Similarities and differences between browsers and NodeJS EventLoop and some mechanisms

##Use javascript to determine browser type

The above is the detailed content of Four ways to create objects in JavaScript. For more information, please follow other related articles on the PHP Chinese website!