js-new

How to understand javascript new operation?

A easy example:

function soldier(ID) {
    var temp_obj = {};// ① new helps us a temp_obj
    temp_obj.__proto__ = soldier.prototype;//② new helps us bind the prototype
    temp_obj.ID = ID;
    temp_obj.life = 42;
    
    return temp_obj;//③ new helps us return the temp_obj;
}

soldier.prototype = {//④ new helps us define "prototype"
    type: "Jiefangjun",
    attack: 5,
    walk: function(){},
    run: function(){},
    attack: function(){},
    defend: function(){},
    die: function(){},
}

Using new, we can prevent doing the following things:

• Creating a temporary object (directly using this to visit the temporary object)
• Binding prototype (new knows where your prototype is)
• Returning temporary object
• Giving a name to “prototype”

After we using new :

function soldier(ID) {
    this.ID = ID;
    this.life = 42;
}

soldier.prototype = {
    type: "Jiefangjun",
    attack: 5,
    walk: function(){},
    run: function(){},
    attack: function(){},
    defend: function(){},
    die: function(){},
}

var soldiers = []
for(let i=0; i<100; ++i) {
    soldiers.push(new soldier(i))
}

There is a property named constructor:

soldier.prototype = {
    constructor: soldier
}

So we need to define the property seperatedly.

Implement a new by self

First let’s do a test:

function Test(name) {
  this.name = name
}
Test.prototype.sayName = function () {
    console.log(this.name)
}
const t = new Test('cxk')
console.log(t.name) // 'cxk'
t.sayName() // 'cxk'

Test if we return a value in the function:

function Test(name) {
  this.name = name
  return 1
}
const t = new Test('cxk')
console.log(t.name) // 'cxk'

So if we return a value in the function, there is no difference.

Test if we return an object in the function:

function Test(name) {
  this.name = name
  console.log(this) // Test { name: 'yck' }
  return { age: 26 }
}
const t = new Test('yck')
console.log(t) // { age: 26 }
console.log(t.name) // 'undefined'

So if we return an object, the new doesnt effect.

function create(fun, ...args) {
    let obj = {};//create a temp_obj
    Object.setPrototypeOf(obj, fun.prototype)//bind the temp_obj to prototype
    let result = fun.apply(obj, args)//bind obj to construction function
    return result instanceof Object ? result: obj;
}

Then we test function create :

function Test(name, age) {
  this.name = name
  this.age = age
}
Test.prototype.sayName = function () {
    console.log(this.name)
}
const a = create(Test, 'cxk', 21)
console.log(a.name) // 'cxk'
console.log(a.age) // 21
a.sayName() // 'cxk'