理解函数、构造函数、原型与原型链四者之间的关系

第一:如何理解函数、构造函数相同点和不同点?

  1. 构造函数就是一个普通的函数,创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写。
  2. 构造函数和普通函数的区别就是调用方式的不同,普通函数是直接调用,而构造函数需要使用new关键字来调用。
    例如:创建一个person函数和Person构造函数
//普通函数
function person(name , age ,gender){
	//创建一个新的对象
	var obj = new Object();
	//向对象中添加属性
	obj.name = name;
	obj.age = age;
	obj.gender = gender;
	obj.sayName = function(){
		alert(this.name);
	};
	//将新的对象返回
	return obj;
}
//普通函数的调用
var obj = person("蜘蛛精",18,"女"); 
console.log(obj);

//构造函数
function Person(name , age , gender){
	this.name = name;
	this.age = age;
	this.gender = gender;
	this.sayName = function(){
		alert(this.name);
	};
}
// 构造函数的调用
var per = new Person("猪八戒",28,"男");
console.log(per);
  1. 通过普通函数创建的对象都是Object的实例,通过构造函数创建的的对象是其自身的实例,但是所有对象都是Object的后代。

例如:上面的例子在控制台输出的结果看下图
在这里插入图片描述
4. 当以函数的形式调用时,this是window,而当以构造函数的形式调用时,this就是新创建的那个对象。

//普通函数
function fn() {
	console.log(this) //输出的是window
}
//普通函数的调用
var obj = fn()
//构造函数
function Function() {
	console.log(this) //输出的是Function
}
//构造函数的调用
var Fn = new Function()

第二:原型与原型链之间的关系

一、关于原型:

  1. 我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype,而prototype属性指向一个对象,也就是这个函数的原型对象,我们也可以称之为原型。
  2. 如果函数作为普通函数调用prototype没有任何作用,当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性,指向该构造函数的原型对象,我们可以通过__proto__来访问该属性。
  3. 原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,我们可以将对象中共有的内容,统一设置到原型对象中。

二、关于原型链:

  1. 原型对象也是对象,所以它也有原型,当我们使用一个对象的属性或方法时,会现在自身中寻找,自身中如果有,则直接使用,如果没有则去原型对象中寻找,如果原型对象中有,则使用,如果没有则去原型的原型中寻找,这样就形成一个链式结构,我们称之为原型链。
  2. 原型链最顶层是Object对象的原型,Object对象的原型没有原型,如果使用一个对象的属性或方法时,原型链中没有,一直找到Object原型,在Object原型中依然没有找到,则返回undefined。

所谓原型链其实就是由原型对象的原型对象构成的一个链式结构。

三、原型的作用:

  • 创建构造函数时,可以将对象共有的属性和方法,统一添加到构造函数的原型对象中,这样就不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法了。

四、如何检查对象中含有某一个属性

  • 使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true
console.log("属性名" in 对象名);

五、检查一个对象自身是否含有某一个属性

  • 可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性,使用该方法只有当对象自身中含有属性时,才会返回true
console.log(对象名.hasOwnProperty("属性名"));

第三、函数、构造函数当中的原型对象

  • 普通函数的原型对象就是Object的原型对象,而构造函数的原型对象的原型对象才是Object原型对象。还是来看函数与构造函数举例的输出结果。
    在这里插入图片描述
    **注:**通过截图当中的constructor属性,我们可以看出普通函数的constructor属性默认指向prototype对象所在的构造函数Object,而构造函数的constructor属性默认指向prototype对象所在的构造函数Person。
发布了20 篇原创文章 · 获赞 11 · 访问量 1748

猜你喜欢

转载自blog.csdn.net/qq_16221009/article/details/103096237