参考文档:
laviniatu:https://blog.csdn.net/sinat_21742529/article/details/83659459
长安城下翩翩少年:https://www.cnblogs.com/honkerzh/p/10270624.html
d_ph:https://blog.csdn.net/qq_36996271/article/details/82527256
构造函数的定义
用new关键字来调用的函数,称为构造函数。专门用来生成实例对象的函数。
写法上构造函数本身和普通函数没有差别。主要是却别是使用上,构造函数使用时使用new 关键字生成实例对象。
构造函数命名上一般会首字母大写。
浏览器有很多内置构造函数:(JS中几乎所有的数据都可以基于构造函数创建)
引用类型:Object,Array,RegExp,Date;
包装类型:String,Number,Boolean;
let arr = [] ; //是arr = new Array();的语法糖;
let obj = {} ; //是obj = new Object()的语法糖;
使用构造函数的原因:
举例,我们要录入一个班级中50个同学的资料 。
普通写法:
let p1 = {name : "p1" , age : 6 , gender : "男" , hobby : "游泳"} ;
let p2 = {name : "p2" , age : 6 , gender : "女" , hobby : "跑步"} ;
let p3 = {name : "p3" , age : 6 , gender : "男" , hobby : "学习"} ;
...
我们可以像上面代码一样,把每个同学的信息当做一个对象来处理。但是这种写法会重复很多无意义的代码。如name,age,gender,hobby;我们需要写50遍。
构造函数写法:
function Person(name,gender,hobby,age){
this.name = name ;
this.gender = gender ;
this.hobby = hobby ;
this.age = age || 6 ;
}
let p1 = new Person("p1","男","游泳");
let p2 = new Person("p2","女","跑步");
let p3 = new Person("p3","男","学习",8);
如果数量少,可能体现不出来构造函数的好处。但比如这个例子,50个学生,使用构造函数相比普通对象就要方便很多。
构造函数的执行过程:(以Person为例)
1、当以new关键字调用时,会创建一个Object对象,在堆中开辟一个新的内存空间,标记为Person的实例。
2、函数体内部的this指向改内存。
3、执行函数体内的代码。
4、默认返回this。
构造函数的返回值
(1):默认返回this;
this指向的是构造函数实例对象的地址。
(2):手动添加基本数据类型返回值。
function Person(name,gender,hobby,age){
this.name = name ;
this.gender = gender ;
this.hobby = hobby ;
this.age = age || 6 ;
return 100 ;
}
let p1 = new Person("p1","男","游泳");
let p2 = Person("p2","女","跑步");
console.log(p1) //Person { name: 'p1', gender: '男', hobby: '游泳', age: 6 }
console.log(p2) //100
函数返回基本类型的情况,如上面代码所示,
p2的调用是把Person当做普通函数调用,返回的是100 。
p1的调用是把Person作为构造函数,还是返回this。
(3):手动添加引用数据类型返回值
function Person(name,gender,hobby,age){
this.name = name ;
this.gender = gender ;
this.hobby = hobby ;
this.age = age || 6 ;
return [1,2,3,4];
}
let p1 = new Person("p1","男","游泳");
let p2 = Person("p2","女","跑步");
console.log(p1) //[1,2,3,4]
console.log(p2) //[1,2,3,4]
无论是作为普通函数还是构造函数,都将返回改引用数据类型。
this的指向问题:
(1):作为普通函数,this指向window
(2):作为构造函数,this指向改构造函数生成的实例对象(也可以说实例对象的地址)
(3):以方法的形式调用,谁调用方法this就指向谁。
原型
基本概念:
1、所有的引用类型可以自由扩展属性(null除外) ;
2、所有的引用类型都有一个“__proto__"属性。也叫隐式原型,它是一个普通的对象。
3、所有的函数都有一个prototype属性(也叫显式原型,它也是个普通对象)。
4、所有引用类型,它的“__proto__”属性指向它的构造函数的prototype属性。
5、当试图得道一个对象的属性时,这个对象本身不存在这个属性,那么它就会去它的“__proto__”属性(也就是它的构造函数的prototype属性)去寻找。
举例:
function Person(name,gender,hobby,age){
this.name = name ;
this.gender = gender ;
this.hobby = hobby ;
this.age = age || 6 ;
}
Person.prototype = {
introduce:function(){
console.log(`大家好,我的名字叫${this.name},我的性别是${this.gender},我今年${this.age},我的爱好是${this.hobby}`)
}
}
let p1 = new Person("p1","男","游泳");
let p2 = new Person("p2","女","跑步",10);
p1.introduce(); //大家好,我的名字叫p1,我的性别是男,我今年6,我的爱好是游泳
p2.introduce(); //大家好,我的名字叫p2,我的性别是女,我今年10,我的爱好是跑步
因为构造函数中没有定义introduce方法,所以创建p1和p2实例的时候,p1和p2并没有introduce方法。当试图得到一个对象的属性或方式时,如果这个对象本身不存在这个属性,那么就回去他的构造函数的prototype属性中去寻找。
当然我们也可以在创建构造函数时就添加introduce方法,如下:
function Person(name,gender,hobby,age){
this.name = name ;
this.gender = gender ;
this.hobby = hobby ;
this.age = age || 6 ;
this.introduce = function(){
console.log(`大家好,我的名字叫${this.name},我的性别是${this.gender},我今年${this.age},我的爱好是${this.hobby}`)
}
}
let p1 = new Person("p1","男","游泳");
let p2 = new Person("p2","女","跑步",10);
p1.introduce(); //大家好,我的名字叫p1,我的性别是男,我今年6,我的爱好是游泳
p2.introduce(); //大家好,我的名字叫p2,我的性别是女,我今年10,我的爱好是跑步
以上代码跟上上的代码得到的效果是一样的,但是第二种方法在每次创建Person实例的时候,每个实例对象中都会有一个introduce方法,这样就会比较占资源。我们都知道函数是存在堆中,容易导致内存溢出。
如果通过第一种原型方法实现的话,只需要在构造函数里面给属性赋值,而把方法写在Person.prototype属性里面,这样每个对象都可以使用prototype属性里面的introduce方法,并且节省了不少的资源。
原型链:
当试图得到一个对象的属性时,如果这个对象本身不存在这个属性,那么就会去它的构造函数的prototype属性中去寻找。那么又因为prototype属性是一个对象,所以它也有一个“__proto__”属性。
举例:
function Person(name,gender,hobby,age){
this.name = name ;
this.gender = gender ;
this.hobby = hobby ;
this.age = age || 6 ;
}
Object.prototype.introduce = function(){
console.log(`我的名字叫${this.name},我今年${this.age}岁了,我的性别是${this.gender},我的爱好是${this.hobby}`)
}
let p1 = new Person("p1","男","游泳");
p1.introduce(); //我的名字叫p1,我今年6岁了,我的性别是男,我的爱好是游泳
console.log(p1.introduce === Person.prototype.__proto__.introduce ) ; //true
//p1的introduce方法实际上是利用原型链机制一直往上寻找到Object上面的introduce方法。
console.log(p1.__proto__ === Person.prototype ) ; //true
//每个对象都有一个__proto__属性,指向的是其构造函数的prototype属性。p1的的构造函数是Person
console.log(Person.prototype.__proto__ === Object.prototype ) ; //true
// 每个构造函数都有一个prototype属性,它是一个普通对象,它的构造函数是Object,所以它也会有一个__proto__属性,指向的是Object的prototype属性,
console.log(Object.prototype.__proto__ === null ) ; // true
// Object作为构造函数,也有一个prototype属性,它的prototype属性作为一个普通对象也有一个__proto__属性,值为null;
图解: