快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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

一:原型和原型对象:

创新互联建站主要从事成都网站制作、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务克山,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

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

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

 

1
zhangsan.__proto__==Person.prototype

 

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

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

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

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

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的详解
文章位置:http://6mz.cn/article/ghdddd.html

其他资讯