js构造函数,原型对象

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 {}

构造函数的执行流程

1. 立刻创建一个新的对象(对比工厂方式创建对象,构造函数内部做了此操作)
2. 将新建对象设置为函数中的this,在构造函数中可以使用this来引用新建的对象
3. 逐行执行函数中的代码
4. 将新建的对象作为返回值返回

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 是其原型对象的原型对象的属性