关于JS面向对象中原型和原型链以及他们之间的关系及this的详解

简介:

一:原型和原型对象:

1.函数的原型prototype:函数才有prototype,prototype是一个对象,指向了当前构造函数的引用地址。

2.函数的原型对象__proto__:所有对象都有__proto__属性, 当用构造函数实例化(new)一个对象时,会将新对象的__proto__属性指向 构造函数的prototype。

 

1
zhangsan.__proto__==Person.prototype

 

注:在上述代码中Person是构造函数,zhangsan则是该构造函数的一个实例化对象。

以下用一张图来解释原型对象和函数的原型之间的关系:

由以上图片可以清楚的看出来函数原型和原型对象之间的联系:

zhangsan是构造函数的一个实例化对象,它的__proto__则是指向它的构造函数prototype,即Person.prototype;

构造函数Person()的__proto__指向函数总类Function的prototype,而Function()本身也会指向Function的prototype,

Person.prototype和Function.prototype都hi会指向Object总类的prototype,即Object.prototype,Object()的__proto__指向Function.prototype

Object.prototype的__proto__会指向null。

综上:

①所有函数的__proto__都是指向Function的prototype。

②构造函数new出来的对象__proto__指向构造函数的prototype。

③非构造函数实例化出的对象或者对象的prototype的__proto__指向Object的prototype。

④Object的prototype指向null。

二:this详解:

 

1.谁最终调用函数,this指向谁。
①this指向的永远只可能是对象!!!
②this指向谁永远不取决于this写在哪,而是取决于函数在哪调用
③this指向的对象,称之为函数的上下文context,也叫函数的调用者

2.this指向的规律(与函数调用的方式息息相关):
this指向的情况,取决于函数调用方式有哪些,
①通过函数名()直接调用:this指向window
②通过对象.函数名()调用的:this指向这个对象
③函数通过数组的一个元素,通过数组下标调用的,this指向这个数组
④函数作为window内置函数的回调函数调用时,this指向window如setTimeout setInterval 等
⑤函数作为构造函数用new关键字调用时,this指向新new出的对象。

实例:

1
2
3
function func(){
             
        }

①通过函数名()直接调用:this指向window。

1
func();

②通过对象.函数()调用的:this指向这个对象。

狭义对象:

1
2
3
4
5
var obj={
      name:"obj",
      func1:func
    }
obj.func1()

广义对象:

1
2
3
document.getElementById("div").onclick=function(){
    this.style.backgroundColor="red";
}

③函数通过数组的一个元素,通过数组下标调用的,this指向这个数组  。

1
2
var arr=[func,1,2,3];
arr[0]();

④函数作为window内置函数的回调函数调用时,this指向window。

1
2
setTimeout(func,1000);
setInterval(func,1000);

⑤函数作为构造函数用new关键字调用时,this指向新new出的对象。

1
var obj = new func();

以上就是原型链和this的 详解。



本文转自 bxst 51CTO博客,原文链接:http://blog.51cto.com/13013670/1943958

相关文章
|
1月前
|
数据采集 JavaScript 前端开发
一站搞定原型链:深入理解JavaScript的继承机制
综上所述,可以得出: 1. 原型链是对象通过原型实现属性和方法继承的一种机制。 2. 每个对象都有一个 __proto__ 属性,指向它的原型对象。 3. 每个函数(包括构造函数)都有一个 prototype 属性,指向一个对象,这个对象的属性和方法可以被实例共享。 4. 构造函数创建对象时,新对象的 __proto__ 属性指向构造函数的 prototype 对象。 5. 继承可以通过设置原型对象实现,也可以使用 ES6 的 class 语法糖。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
6月前
|
JavaScript 前端开发 开发者
理解JavaScript中的原型链:基础与实践
【10月更文挑战第8天】理解JavaScript中的原型链:基础与实践
|
5月前
|
JavaScript 前端开发
JavaScript 原型链的实现原理是什么?
JavaScript 原型链的实现原理是通过构造函数的`prototype`属性、对象的`__proto__`属性以及属性查找机制等相互配合,构建了一个从对象到`Object.prototype`的链式结构,实现了对象之间的继承、属性共享和动态扩展等功能,为 JavaScript 的面向对象编程提供了强大的支持。
|
8月前
|
JavaScript 前端开发
如何在JavaScript中实现基于原型的继承机制
【8月更文挑战第14天】如何在JavaScript中实现基于原型的继承机制
48 0
|
5月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
70 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript 前端开发
原型链在 JavaScript 中的作用是什么?
原型链是 JavaScript 中实现面向对象编程的重要机制之一,它为代码的组织、复用、扩展和多态性提供了强大的支持,使得 JavaScript 能够以简洁而灵活的方式构建复杂的应用程序。深入理解和熟练运用原型链,对于提升 JavaScript 编程能力和开发高质量的应用具有重要意义。
|
5月前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
6月前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
74 1
|
7月前
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26
|
6月前
|
JavaScript 前端开发 开发者
深入理解JavaScript原型链:从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链:从基础到进阶
110 0