首页 > 代码库 > 关于JS面向对象中原型和原型链以及他们之间的关系及this的详解
关于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的 详解。
关于JS面向对象中原型和原型链以及他们之间的关系及this的详解