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;
js原型和原型链的理解
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）；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。