关于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的 详解。

时间: 2024-08-06 11:56:57

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

js中原型和原型链理解

js中属性的继承以及查找都会用到原型链的知识,对于深入学习js的人来说是一个难点也是一个重点,下面梳理下对于原型以及原型链的理解. 首先,我们要知道什么是原型以及原型链?他们有什么样的作用? 可以理解为JS对象在创建时都会与之关联另一个对象,这就是我们所说的原型,每一个对象都会从原型"继承"属性.下图表示了构造函数与实例原型的关系,其中Object.prototype表示实例原型. 那么实例与实例原型又是怎么联系的呢?接下来又要说到另一个属性__proto__,每一个JS对象都有一个属

JS面向对象之继承——原型链

原型对象 每个javascript对象都有一个原型对象,这个对象在不同的解释器下的实现不同.比如在firefox下,每个对象都有一个隐藏的__proto__属性,这个属性就是“原型对象”的引用. 原型链 由于原型对象本身也是对象,根据上边的定义,它也有自己的原型,而它自己的原型对象又可以有自己的原型,这样就组成了一条链,这个就是原型链,JavaScritp引擎在访问对象的属性时,如果在对象本身中没有找到,则会去原型链中查找,如果找到,直接返回值,如果整个链都遍历且没有找到属性,则返回undefi

JavaScript中原型和原型链

原型[prototype]: 为其他对象提供共享属性的对象. 每个函数都有一个原型(prototype)属性,这个属性是一个指针,指向一个对象,这个对象包含特定实例共享的一些属性和方法. 以例服人: 这个例子说明了原型对象是共享的,并且是一个指针,并且对象的实例中也有指向prototype指向对象的指针. function Animal(name) { this.name = name || "动物"; } Animal.prototype.runs = function() { co

关于javascript中原型和原型链的理解

对于js中的原型以及原型链,笔者一直觉得有些迷惑,对于其中的概念是大致理解的,但是如果让笔者说出来就感觉比较难以清晰的表达出来,所以就在这里做一下总结,有疑问的时候再翻出来回顾一下 首先,我们看一段代码 function Person() { } var person = new Person(); console.log(person); console.log(Person); console.log(Object) console.log(person.prototype); consol

JS对象继承与原型链

1.以复制方式实现的继承 1.1浅拷贝 基本类型的复制 1 var parent = { 2 lanage: "chinese" 3 } 4 5 var child = { 6 name: "xxx", 7 age: 12 8 } 9 10 function extend(parent, child) { 11 var child = child || {}; 12 for (const propertype in parent) { 13 child[proper

第20篇 js高级知识---深入原型链

前面把js作用域和词法分析都说了下,今天把原型链说下,写这个文章费了点时间,因为这个东西有点抽象,想用语言表达出来不是很容易,我想写的文章不是简单的是官方的API的copy,而是对自己的知识探索和总结的过程,以及在这个过程碰到的问题都一一写出来,我想大多数人应该也有这个疑惑,然后带着疑惑去找答案,当你把这个疑惑解决之后,才觉得很有成就感.下面不多说了,开始说说什么是原型链.要想了解原型链,还是要从简单的开始,什么是原型?首先看下代码: function funcA() { this.show =

js(4) 继承与原型链

一:使用原型链来实现继承 在介绍原型链之前,要引入构造函数,原型,和实例的关系 构造函数都有一个原型对象,在原型对象中存在一个指向构造函数的指针(constructor),在实例中包含一个指向原型对象的内部指针(prototype) 构建原型链的原理是让一个类型的原型对象等于另一个类型的实例 当使用new 操作符构造实例的时候,实例会拥有构造函数原型中的属性和方法 实现代码如下: function SuperType(){ this.property=true; }//在SuperType的原型

js面向对象之继承-原型继承

//animal 父类 超类 var Animal = function(name) { this.name = name; this.sayhello = function() { alert("HI,我是" + this.name + ",你愿意和我做朋友吗?"); }; }; Animal.prototype.shout = function() { alert(this.name + ",正在叫!"); }; Animal.prototy

js面向对象之组合原型模式+构造函数

我们都知道原型模式构建对象的最大优点就是共享,但是你知道吗,原型模式最大的缺点就是它最大的优点,如果共享的是方法的话使我们期望的一般也不会有什么影响,但是如果牵扯到其他的引用类型的话就会出现麻烦,看如下: //原型的缺点 function Box() {} Box.prototype={ constructor:Box, name:'Lee', age: 20, family:['哥哥','姐姐','妹妹'] } var box1 = new Box(); var box2 = new Box(