1.js构造函数
在JavaScript中,用new关键字来调用的函数,称为构造函数,构造函数首字母一般大写,构造函数就是一个普通的函数,但是有自己的特征和用法。
特点
- 一个构造函数可以使用 new 关键字来创造出若干的实例。
- 每一个实例都可以使用这个构造函数的属性和方法。
(1)new关键字工作原理
- (1)创建空对象 { }
- (2)this指向这个对象 this = { }
- (3)执行赋值代码
- (4)返回这个对象 return this
// function Person(name,age){
// //(1)创建空对象 {}
// //(2)this指向这个对象 this = {}
// //(3)执行赋值代码
// //(4)返回这个对象 return this
// this.name = name;
// this.age = age;
// this.sayHi = function(){
// console.log('来自m78星云的靓仔');
// }
// };
// let p1 = new Person('来自m78星云的靓仔',28);
// console.log(p1);
// p1.sayHi();
// let p2 = new Person('来自m78星云的靓仔',18);
// p2.sayHi();
// //每一个对象的方法都不是同一个
// console.log(p1.sayHi == p2.sayHi);//false
2.构造函数的弊端
- 1: 如果构造函数中有很多的方法那么就会开辟很多的空间,浪费内存资源
- 2: 如果在全局情况下声明函数,虽然解决了内存资源浪费的问题,但是又会出现全局变量污染的问题
- 3: 可以重新声明一个对象专门存放这些方法,但是新的问题时,如果有很多个构造函数,就要声明很多个这样的对象
总结:(1)内存资源浪费 (2)全局变量污染
3.解决方案
(1) 对象(使用对象解决)
// let obj = {
// fn:function(){
// console.log('来自m78星云的靓仔');
// },
// eat:function(){
// console.log('来自m78星云的靓仔');
// }
// }
// function Person(name,age){
// //(1)创建空对象 {}
// //(2)this指向这个对象 this = {}
// //(3)执行赋值代码
// //(4)返回这个对象 return this
// this.name = name;
// this.age = age;
// this.sayHi = obj.fn;
// this.eat = obj.eat;
// };
// let p1 = new Person('来自m78星云的靓仔',28);
// console.log(p1);
// p1.sayHi();
// let p2 = new Person('来自m78星云的靓仔',18);
// p2.sayHi();
// console.log(p1.sayHi == p2.sayHi);//true
特点:(1)解决内存资源浪费 (2)全局变量污染(对象自身还是全局的,造成新的全局变量污染)
(2) 原型对象
原型对象?
- 每一个构造函数在声明的时候,系统会自动的创建一个与之对应的对象,称之为原型对象
function Person(name,age){
this.name = name;
this.age = age;
};
如何获取原型对象
- 每一个函数都有一个 prototype 属性,指向这个原型对象
console.log(Person.prototype);
原型对象是一个对象 : 用于存储数据
Person.prototype.sayHi = function(){
console.log('来自m78星云的靓仔');
};
谁可以访问 原型中的成员(属性+方法)
- a. 构造函数自身 : 构造函数名.prototype
- b. 这个构造函数所创建(实例化)的每一个对象
// 实例化对象
let p1 = new Person('来自m78星云的靓仔',18);
p1.sayHi();
//实例化对象
let p2 = new Person('来自m78星云的靓仔',20);
p2.sayHi();
console.log(p1.sayHi === p2.sayHi);//true