JavaScript学习笔记(5)——构造函数、原型对象

---

前言

本篇讲解this，使用构造函数批量创建对象，揭秘构造函数、构造函数创建的对象、构造函数的原型对象之间的关系。

---

一、this

解析器在调用函数每次都会向函数内部传递进一个隐含的参数,
  这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象，
  根据函数的调用方式的不同，this会指向不同的对象

1.以函数的形式调用时，this永远都是window
2.以方法的形式调用时，this就是调用方法的那个对象
3.以构造函数的形式调用时，this就是新创建的对象(本篇第二节介绍)

function fun(){
	console.log(this.name);
}			
var obj = {
	name:"孙悟空",
	sayName:fun
};
			
var obj2 = {
	name:"沙和尚",
	sayName:fun
};
			
var name = "全局的name属性";
//以函数形式调用，this是window
fun();   //显示"全局的name属性"
			
//以方法的形式调用，this是调用方法的对象
obj.sayName();   //显示"孙悟空"
obj2.sayName();  //显示"沙和尚"

二、批量创建对象

1.使用工厂方法

function createPerson(name , age ,gender){
	var obj = new Object();
	obj.name = name;
	obj.age = age;
	obj.gender = gender;
	obj.sayName = function(){
		alert(this.name);
	};
	return obj;
}

使用工厂方法创建的对象，使用的构造函数都是Object，所以创建的对象都是Object这个类型，导致我们无法区分出多种不同类型的对象

2.构造函数

构造函数是专门用来创建对象的
构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写
构造函数和普通函数的区别就是调用方式的不同
普通函数是直接调用，而构造函数需要使用new关键字来调用

构造函数的执行流程：
1.立刻创建一个新的对象
2.将新建的对象设置为函数中this，在构造函数中可以使用this来引用新建的对象
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回

使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类，我们将通过一个构造函数创建的对象，称为是该类的实例（这是便于理解，但在JS中没有类/实例的概念，可以说把这个构造函数的this绑定到新建的对象上）。

function Person(name , age , gender){
	this.name = name;
	this.age = age;
	this.gender = gender;
	this.sayName = function(){
		alert(this.name);
	};
}

function Dog(){
	
}

var per = new Person("孙悟空",18,"男");
var per2 = new Person("玉兔精",16,"女");
var per3 = new Person("奔波霸",38,"男");

var dog = new Dog();

console.log(per);   //Person
console.log(dog);   //Dog

使用instanceof可以检查一个对象是否是一个类的实例，如果是，则返回true，否则返回false

console.log(per instanceof Person);
console.log(dog instanceof Object);  //true

所有的对象都是Object的后代，所以任何对象和Object做instanceof检查时都会返回true

在构造函数内部创建方法时，构造函数每执行一次就会创建一个新的sayName方法，所有实例的sayName都是唯一的。
这样就导致了构造函数执行一次就会创建一个新的方法，这是完全没有必要，完全可以使所有的对象共享同一个方法

但是如果将sayName方法在全局作用域中定义（如下）也是可以的，存在全局作用域的命名空间污染问题，而且定义在全局作用域中也很不安全

function fun(){
		alert("Hello大家好，我是:"+this.name);
}

建议用原型对象

三、原型

原型 prototype
我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象

如果函数作为普通函数调用，prototype没有任何作用
当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__来访问该属性

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象

当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用；如果没有则会去原型对象中寻找，找到则直接使用

以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中

function MyClass(){
	
}

//向MyClass的原型中添加属性a
MyClass.prototype.a = 123;

//向MyClass的原型中添加一个方法
MyClass.prototype.sayHello = function(){
	alert("hello");
};

var mc = new MyClass();

var mc2 = new MyClass();

console.log(MyClass.prototype);  //是个Object
console.log(mc2.__proto__ == MyClass.prototype);   //true

//向mc中添加a属性
mc.a = "我是mc中的a";

console.log(mc2.a);   //123

mc.sayHello();  //显示"hello"

所以可以利用原型对象把上一节的全局作用域方法改写成

//向原型中添加sayName方法
Person.prototype.sayName = function(){
	alert("Hello大家好，我是:"+this.name);
};
			
//创建一个Person的实例
var per = new Person("孙悟空",18,"男");
var per2 = new Person("猪八戒",28,"男");
per.sayName();     //显示Hello大家好，我是:孙悟空
per2.sayName();   //显示Hello大家好，我是:猪八戒

使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true

console.log("a" in mc);  //true

可以使用对象的hasOwnProperty( )来检查对象自身中是否含有该属性
只有当对象自身中含有某一属性时，才会返回true
hasOwnProperty( )是一个在原型里的方法

console.log(mc.hasOwnProperty("age"));
console.log(mc.hasOwnProperty("hasOwnProperty"));  //false

原型对象也是对象，所以它也有原型，也就是里面还有一个__proto__

当我们使用一个对象的属性或方法时，会先在自身中寻找， 自身中如果有，则直接使用；
如果没有则去原型对象中寻找，如果原型对象中有，则使用；
如果没有则去原型的原型中寻找，直到找到Object对象的原型；
Object对象的原型没有原型(__proto__里面是null，有这个属性名)，如果在Object原型中依然没有找到，则返回undefined

console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));  //这是false
console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));  //这是ture
console.log(mc.__proto__.__proto__.__proto__);//这是null，因为已经找到Object了，它没有原型

当我们直接在页面中打印一个对象时，实际上是输出对象的toString()方法的返回值
如果我们希望在输出对象时不输出[object Object]，可以在构造函数的原型对象中修改toString()方法

//修改Person原型的toString
Person.prototype.toString = function(){    //注意：一定要加prototype
	return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
};

以下可以更好理解构造函数创建的对象、构造函数、构造函数的原型对象的关系

四、垃圾回收

当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，所以这种垃圾必须进行清理。
在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作

我们需要做的是将不再使用的对象设置null即可

---

总结

本篇知识点比较重要且复杂，通过this可以指代对象，通过构造函数批量创建对象，构造函数的原型对象大有用处。

根据尚硅谷李立超老师2019年的JS视频整理而成。