JS实例化过程总结（附原型链图解）

没有返回值的构造函数形式

function Person(name,age){
    this.name = name;
    this.age = age;
    this.show = function(){
        console.log('每个人的身上都有毛毛');
    }
}


var person = new Person('LiMing',22);
console.log(person);
person.show();//如果不调用，不会输出
console.log(person instanceof Person);
console.log(person.__proto__ == Person.prototype);

运行结果如下：

 如果实例没有调用方法，图中圈出的部分不能被输出；

根据图中显示结果，我们可以得出以下结果：

1.创建了一个object对象{}；
2.将构造函数的静态属性传递给创造的对象；
3.实例对象额外添加了__proto__属性，指向了构造函数的prototype属性，也就是原型对象；
4.构造函数的原型对象有一个constructor方法，返回值为构造函数；
5.构造函数内的this指向为实例对象；
另外：如果实例没有调用构造函数的方法，不会输出图中画框的部分；

如果有返回值的情况1：返回值为基本数据类型

function Person1(name,age){
    this.name = name;
    this.age = age;
    this.show = function(){
        console.log('每个人的身上都有毛毛');
    };
    return 22
}


var person1 = new Person1('LiMing',22);
console.log(person1);
person1.show();
console.log(person1 instanceof Person1);
console.log(person1.__proto__ == Person1.prototype);

 从结果看，基本的数据类型不影响实例过程；

如果有返回值的情况2：返回值为引用数据类型

var person2 = new Person2('LiMing',22);
console.log(person2);
person2.show();
console.log(person2 instanceof Person2);
console.log(person2.__proto__ == Person2.prototype);


function Person3(name,age){
    this.name = name;
    this.age = age;
    this.show = function(){
        console.log('每个人的身上都有毛毛');
    };
    return {
        weight:70,
        height:185,
        show:function () {
            console.log('你是我天边最美的云彩!')
        }
    }
}


var person3 = new Person3('LiMing',22);
console.log(person3);
person3.show();
console.log(person3 instanceof Person3);
console.log(person3.__proto__ == Person3.prototype);

function Person4(name,age){
    this.name = name;
    this.age = age;
    this.show = function(){
        console.log('每个人的身上都有毛毛');
    };
    return [12,23,'345',{name:'LiHua'}]
    
}


var person4 = new Person4('LiMing',22);
console.log(person4);
person4.show();
console.log(person4 instanceof Person4);
console.log(person4.__proto__ == Person4.prototype);

 从结果看，如果构造函数返回一个object的话，实例为返回的对象；

最后，附上一张本人觉得比较好的原型链图解

其中中间颜色加深部分，分为三种构造器，

1>自定义构造器；
2>对象构造器；
3>内置对象构造器（例如Array，String，Date，Match）；