this和原型对象(prototype)

导读:本篇文章讲解 this和原型对象(prototype),希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

也许你感觉自己的努力总是徒劳无功,但不必怀疑,你每天都离顶点更进一步。今天的你离顶点还遥遥无期。但你通过今天的努力,积蓄了明天勇攀高峰的力量。加油!

this

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

  • 以函数的形式调用时,this永远都是window
  • 以方法的形式调用时,this就是调用方法的那个对象

this可以让我们的程序更加灵活,我们可以模拟一种场景,例如:定义一个方法,在对象调用它时,可以打印出自己的名字。

<script type="text/javascript">
			
			//创建一个name变量
			var name = "全局";
			
			//创建一个fun()函数
			function fun(){
				console.log(this.name);
			}
			
			//创建两个对象
			var obj = {
					name:"孙悟空",
					sayName:fun
			};
			
			var obj2 = {
					name:"沙和尚",
					sayName:fun
			};
			
			//我们希望调用obj.sayName()时可以输出obj的名字
			//obj.sayName();
			
			obj.sayName();
			
		</script>

如果这个地方不使用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);
			//console.log(mc2.__proto__ == MyClass.prototype);
			
			//向mc中添加a属性
			mc.a = "我是mc中的a";
			
			//console.log(mc2.a);
			
			mc.sayHello();

在这里插入图片描述
注意:使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true。

所以衍生思考如果我们就只想知道对象本身有没有这个属性怎么办呢?

解决办法:可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性,使用该方法只有当对象自身中含有属性时,才会返回true。

进一步思考,我们发现创建对象的时候我们压根没有定义hasOwnProperty()这个方法,那为什么我们可以使用这个方法呢?

我们的第一反应肯定是:这个方法在它的原型对象中,但经过查询发现不是!

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

这里我们再引入一个概念:原型对象也是对象,所以它也有原型!
当我们使用一个对象的属性或方法时,会现在自身中寻找,自身中如果有,则直接使用,如果没有则去原型对象中寻找,如果原型对象中有,则使用,如果没有则去原型的原型中寻找,直到找到Object对象的原型Object对象的原型没有原型,如果在Object原型中依然没有找到,则返回undefined。

如此我们继续探索,在他原型的原型中去寻找,发现正是如此。

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

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/122211.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!