【JS小知识】this的指向、工厂方法、构造函数及优化、prototype原型、forEach()的使用

/**
 * 解析器在调用函数时，每次都会向函数内部传递一个隐含的参数
 *     这个隐含的参数就是this，this指向的是一个对象，
 *     这个对象我们称为函数执行的上下文对象，
 *     根据函数的调用方式的不同，this会指向不同的对象
 *         1、以函数方式调用，this是window
 *         2、以方法的形式调用时，this就是调用方法的那个对象
 *         3、以构造函数的形式调用时，this是新创建的对象
 * */

function func(){
	console.log(this.name);
}

// 创建一个对象
var obj = {
	name:"sun",
	sayName:func
};

var obj2 = {
	name:"zhu",
	sayName:func
};

var name = "全局的name属性";
//以函数方式调用，this是window
func(); 
//以方法的形式调用，this是调用方法的对象
obj.sayName();
obj2.sayName();

 /**

 * 由于普通创建多个对象时会占用大量篇幅，而此类代码吗是可以复用的，因此
 * 使用工厂方法创建对象
 *         通过该方法可以大批量的创建对象
 *         使用工厂方法创建的对象，使用的构造函数都是Object
 *         所以创造的对象都是objec类型
 *         就导致我们无法区分出多种不同类型的对象    
 * */

普通创建与工厂方法创建对象对比如下所示：

// 普通创建对象
var obj01 = {
	name:"sun",
	age:28,
	gender:"男",
	sayName:function(){
		console.log(this.name);
	}
}

var obj02 = {
	name:"zhu",
	age:218,
	gender:"男",
	sayName:function(){
		console.log(this.name);
	}
}
var obj03 = {
	name:"sha",
	age:286,
	gender:"nv",
	sayName:function(){
		console.log(this.name);
	}
}

obj03.sayName();

// 使用工厂方法创建对象
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 sun = createPerson("sun", 28, "男");
var zhu = createPerson("猪", 28, "男");
var bai = createPerson("白", 228, "女");

bai.sayName();

/**
 * 由于工厂方法每次都要创建一个新的对象，所以我们使用构造函数
 * 构造函数
 * 创建一个构造函数，专门用来创建Person对象的
 *         构造函数就是一个普通的函数，创建方式和普通函数没有区别，
 *         不用的是构造函数习惯上首字母大写
 * 
 * 构造函数和普通函数的区别就是调用方式的不同
 *        普通函数是直接调用，而构造函数需要使用new关键字来调用 
 *
 * */

代码如下所示（分为加入形参与不加形参两种）：

function Person(){
	this.name = "hanzi";
	this.age = 18;
	this.sayName = function(){
		console.log(this.name);
	}
}

// 加入形参以能复用构造函数
function Person_New(name, age){
	this.name = name;
	this.age = age;
	this.sayName = function(){
		console.log(this.name);
	}
}

var per = new Person();
var per1 = new Person_New("卓", 888);
var per2 = new Person_New("卓", 888);

per.sayName();
per1.sayName();
per2.sayName();

// 使用instanceof 可以检查一个对象是否是一个类的实例
// 语法：对象instanceof 构造函数，如果是，则返回true，否则返回false
console.log(per instanceof Person);
// 判断两个对象调用的方法是否一致，此处返回值应为false，因为每次调用方法都是创建新的对象
// 想要解决这种问题就要优化构造函数
console.log(per1.sayName == per2.sayName);

/**
 * 优化构造函数
 * 将function写到构造函数的属性中的时候，构造函数执行一次就会创建一个方法
 *         执行1000次就会创建1000次的方法，但其作用是一样的，
 *         因此，我们将它写到全局中
 * 
 * 但是！！！！将函数定义在全局作用域，污染了全局作用域的命名空间
 * 而且定义在全局作用域中也很不安全，所以使用prototype（原型）
 * 将函数写到构造函数的原型中，可以让所有对象访问到它
 * */

function Person_New02(name, age){
	this.name = name;
	this.age = age;
	this.sayName = fun;
}

function fun(){
	console.log(this.name);
}

var per3 = new Person_New02("卓11", 888);
var per4 = new Person_New02("卓11", 888);

per3.sayName();
per4.sayName();
console.log(per3.sayName == per4.sayName);

/**
 * prototype原型
 * 我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype
 *         这个属性对应着一个对象，这个对象就是我们所谓的原型对象
 * 如果函数作为普通函数调用prototype没有任何作用
 * 当函数通过以构造函数调用时， 他所创建的对象中都会有一个隐含的属性指向该构造函数的原型对象
 * 我们可以通过__proto__来访问属性
 * 原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象
 *         我们可以将对象中共有的内容，统一设置到原型对象中
 * 
 * 当我们访问对象的一个属性或者方法时，它会先在对象自身中寻找，如果有则直接使用
 *         如果没有则在对象的原型对象中寻找，如果有则直接使用
 *         一直找到Object对象，若没有则返回Undefined
 *     
 * 以后我们创建构造函数时，可以将这些对象共有的属性和方法，同一添加到构造函数的原型对象中，
 *         这样不用分别为每一个对象添加，也不会影响到全局作用域就可以使每个对象都具有这些属性和方法了
 * 
 * */
 

function MyClass(){
	
}

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

var myc = new MyClass();

console.log(myc.__proto__ == MyClass.prototype);
console.log(myc.a);

// 向myc中添加a属性
myc.name = "我是myc中的name";
console.log(myc.name);

//向MyClass的原型中添加方法
MyClass.prototype.sayHello = function(){
	console.log("我是原型中的方法 ");
}
myc.sayHello();

// 可以使用hasOwnProperty()来检查自身中是否含有该函数
console.log(myc.hasOwnProperty("name"));

/**
 * forEach()方法需要一个函数作为参数
 *         像这种函数，由我们创建但不由我们调用，我们称为回调函数
 * 
 * */

//创建一个数组
var arr = ["孙悟空","猪八戒","白骨精","牛魔王"];

arr.forEach(function(value, index, obj){
	console.log(value);
});