JS构造函数
感谢:尚硅谷李立超老师的讲解
通过不同方式创建对象,了解为什么要使用构造函数创建对象?
-
使用对象字面量方式创建一个对象
优点:直观,清晰
缺点:不可复用,都是Object类型的对象
var obj = {
name:"孙悟空",
age:28,
gender:"男",
sayName:function(){
console.log(this.name);
}
}
console.log(obj);
-
使用工厂方式创建一个对象
有点:可复用,更简洁
缺点:对象类型都是Object,无法区分多种不同类型的对象
//创建一个人的对象
function createPerson(name,age,gender){
//创建一个新的对象
var obj = new Object();
//向对象中添加属性
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.sayName = function({
console.log(this.name)
})
return obj;
}
var obj2 = createPerson("猪八戒",28,"男");
console.log(obj2);
//创建一个狗的对象
function createDog(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sayHi = function(){
console.log("汪汪");
}
return obj;
}
var obj3 = createDog("旺财",3);
console.log(obj3);
- 使用构造函数创建一个对象
//创建一个构造函数:构造函数就是一个普通的函数,创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写
//构造函数和普通函数的区别就是调用方式不同,普通函数是直接调用,构造函数需要使用new关键字来调用
function Person(){
}
var p = Person();//直接调用
console.log(p);
//undefined
var p1 = new Person();//使用new关键字调用
console.log(p1);
//Person {}
构造函数的执行流程
- 立刻创建一个新的对象(对比工厂方式创建对象,构造函数内部做了此操作)
- 将新建对象设置为函数中的this,在构造函数中可以使用this来引用新建的对象
- 逐行执行函数中的代码
- 将新建的对象作为返回值返回
function Person(){
this.name = "孙悟空";
console.log(this.name);
}
var per = new Person();
console.log(per);
//孙悟空
//Person {name:"孙悟空"}
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
console.log(this.name);
}
}
var per = new Person("孙悟空",28,"男");
console.log(per);
使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类,
我们将通过一个构造函数创建的对象,称为该类的实例
关于this
根据函数的调用方式的不同,this会指向不同的对象
- 以函数的形式调用时,this永远都是window
- 以方法的形式调用时,this就是调用方法的那个对象
- 以构造函数的形式调用时,this就是新创建的那个对象
解答为什么要使用构造函数创建对象?
不同的构造函数创建的对象,其类型是不一样的
function Person(){
}
var per = new Person();
function Dog(){
}
var dog = new Dog();
console.log(per);
//Person {}
console.log(dog);
//Dog {}
有什么方法可以判断一个对象是否是某个类的实例
-
使用instanceof 可以检查一个对象是否是一个类的实例
语法: 对象 instanceof 构造函数
如果是,则返回true,如果不是则返回false
所有的对象都是Object的后代,所以任何的对象和Object 做instanceof 检查时都会返回true
function Person(){
}
var per = new Person();
function Dog(){
}
var dog = new Dog();
console.log(per instanceof Person);
//true
console.log(dog instanceof Person);
//false
console.log(dog instanceof Dog);
//true
console.log(per instanceof Object);
//true
console.log(dog instanceof Object);
//true
构造函数优化---原型
优化前构造函数: 每创建一个新的对象都会在内存中重新生成一个新的sayName方法,没必要,太过于繁杂额外占用内容空间
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
console.log("我是:"+this.name);
}
}
var per = new Person("孙悟空",28,"男");
var per2 = new Person("猪八戒",38,"男");
console.log(per.sayName());
//我是孙悟空
console.log(per2.sayName());
//我是猪八戒
console.log(per.sayName == per2.sayName);
//false
优化后构造函数: 全局作用域中定义函数,只会加载一次,sayName指向同一个内存地址,节省内存空间,但是污染了全局作用域的命名空间,且很不安全
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = fun;
}
function fun(){
console.log("我是:"+this.name);
}
var per = new Person("孙悟空",28,"男");
var per2 = new Person("猪八戒",38,"男");
console.log(per.sayName());
//我是孙悟空
console.log(per2.sayName());
//我是猪八戒
console.log(per.sayName == per2.sayName);
//true
原型prototype: 我们创建的每个函数,解析器都会向函数中添加一个属性prototype,
原型对象: 这个属性(prototype)对应着一个对象,这个对象就是我们所谓的原型对象,
如果函数作为普通函数调用prototype没有任何作用,
当函数以构造函数调用时,它所创建的对象中都会有一个隐含的属性,指向该构造函数的原型对象,我们可以通过 __proto__ 来访问该属性,
原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,我们可以将对象中共有的内容,统一设置到原型对象中,
当我们访问对象的一个属性时,它会先在对象自身中寻找,自身中如果有,则直接使用,
如果没有则去原型对象中寻找,如果原型对象中有则使用,如果没有则在原型的原型中寻找
function Person(){
}
console.log(Person.prototype);
//{constructor:f}
var per = new Person();
console.log(per.__proto__ ==Person.prototype);
//true
引入原型对象之后,公共的属性或者方法都可以加到原型对象上,对全局没有影响,而且同一类的对象都可以访问到,只加载一次
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
Person.prototype.sayName = function(){
console.log("我叫:"+this.name);
}
var per = new Person("孙悟空",28,"男");
console.log(per.sayName());
//我叫:孙悟空
var per2 = new Person("猪八戒",38,"男");
console.log(per2.sayName());
//我叫:猪八戒
console.log(per.sayName == per2.sayName);
//true
Person.prototype.target = "西天取经";
console.log(per.target);
//西天取经
console.log(per2.target);
//西天取经
运用 in 运算符判断一个属性是否属于一个对象补充
使用in检查对象中是否有某个属性时,如果对象中没有,但是原型中有,也会返回 true,
如果想看自己本身的对象里是否有这个属性,需要通过hasOwnProperty() 方法来判断,使用该方法,只有自身含有属性时才会返回true,否则返回false
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
Person.prototype.target = "西天取经";
Person.prototype.sayName = function(){
console.log("我叫:"+this.name);
}
var per = new Person("孙悟空",28,"男");
console.log("name" in per);
//true
console.log("target" in per);
//true
console.log(per.hasOwnProperty("name"));
//true
console.log(per.hasOwnProperty("target"));
//false
关于hasOwnProperty() 方法,是谁的方法
hasOwnProperty 方法,我们在自己写的对象里并没有添加,但是依然可以使用,所以可以判断,其定然是在其原型对象内,通过__proto__属性,可以获取原型对象,继续使用hasOwnProPerty,依旧返回false,则继续向上一层查找,原型也是对象,所以原型对象也有它的原型对象,在原型对象的原型对象Object对象上,我们看到返回了true,所以可以判断hasOwnProperty 是属于Object对象的方法.
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
Person.prototype.target = "西天取经";
Person.prototype.sayName = function(){
console.log("我叫:"+this.name);
}
var per = new Person("孙悟空",28,"男");
console.log(per.hasOwnProperty("hasOwnProperty"));
//false hasOwnProperty可以判断出hasOwnProperty 不是当前对象的属性
console.log(per.__proto__.hasOwnProperty("hasOwnProperty"));
//false 可以看出hasOwnProperty 也不是其原型对象的属性
console.log(per.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));
//true 可以看出hasOwnProperty 是其原型对象的原型对象的属性
