关于JS面向对象中原型和原型链以及他们之间的关系及this的详解
一:原型和原型对象:
1.函数的原型prototype:函数才有prototype,prototype是一个对象,指向了当前构造函数的引用地址。
2.函数的原型对象__proto__:所有对象都有__proto__属性, 当用构造函数实例化(new)一个对象时,会将新对象的__proto__属性指向 构造函数的prototype。
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出的对象。
实例:
function func(){ }
①通过函数名()直接调用:this指向window。
func();
②通过对象.函数()调用的:this指向这个对象。
狭义对象:
var obj={
name:"obj",
func1:func
}
obj.func1()
广义对象:
document.getElementById("div").onclick=function(){
this.style.backgroundColor="red";
}
③函数通过数组的一个元素,通过数组下标调用的,this指向这个数组 。
var arr=[func,1,2,3];
arr[0]();
④函数作为window内置函数的回调函数调用时,this指向window。
setTimeout(func,1000);
setInterval(func,1000);
⑤函数作为构造函数用new关键字调用时,this指向新new出的对象。
var obj = new func();
以上就是原型链和this的 详解。
关于JS面向对象中原型和原型链以及他们之间的关系及this的详解的更多相关文章
- js中原型和原型链
1.原型: 在JavaScript 中,对象被表现为prototype . 原型其实一直存在于我们接触过的任何一个对象. 2. Tip:在函数对象中也存在__proto__属性,但是查看函数对象的原型 ...
- JavaScript中原型和原型链
原型[prototype]: 为其他对象提供共享属性的对象. 每个函数都有一个原型(prototype)属性,这个属性是一个指针,指向一个对象,这个对象包含特定实例共享的一些属性和方法. 以例服人: ...
- JS 面向对象之继承 -- 原型链
ECMAScript只支持实现继承,其实现继承主要是靠原型链来实现. 原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 简单回顾下构造函数.原型和实例的关系: 每个构造函数都有 ...
- JavaScript的面向对象原理之原型链详解
一.引言 在16年的10月份,在校内双选会找前端实习的时候,hr问了一个问题:JavaScript的面向对象理解吗?我张口就说“JavaScript是基于原型的!”.然后就没什么好说的了,hr可能不知 ...
- JavaScript的面向对象原理之原型链
二.JavaScript的对象 为了能够清楚的解释这一切,我先从对象讲起.从其他面向对象语言(如Java)而来的人可能认为在JS里的对象也是由类来实例化出来的,并且是由属性和方法组成的. 实际上在JS ...
- 泛型编程、STL的概念、STL模板思想及其六大组件的关系,以及泛型编程(GP)、STL、面向对象编程(OOP)、C++之间的关系
2013-08-11 10:46:39 介绍STL模板的书,有两本比较经典: 一本是<Generic Programming and the STL>,中文翻译为<泛型编程与STL& ...
- Javascript 构造函数、原型对象、实例之间的关系
# Javascript 构造函数.原型对象.实例之间的关系 # 创建对象的方式 # 1.new object() 缺点:创建多个对象困难 var hero = new Object(); // 空对 ...
- JS prototype chaining(原型链)整理中······
初学原型链整理 构造器(constructor).原型(prototype).实例(instance); 每一个构造器都有一个prototype对象,这个prototype对象有一个指针指向该构造器: ...
- JS对象继承与原型链
1.以复制方式实现的继承 1.1浅拷贝 基本类型的复制 var parent = { lanage: "chinese" } var child = { name: "x ...
随机推荐
- ASP.NET Web服务(ASMX)学习和代理生成
第一步:按照http://www.c-sharpcorner.com/article/getting-started-with-asp-net-web-services-part-one/ 建立项目和 ...
- 数据结构(三) 用java实现七种排序算法。
很多时候,听别人在讨论快速排序,选择排序,冒泡排序等,都觉得很牛逼,心想,卧槽,排序也分那么多种,就觉得别人很牛逼呀,其实不然,当我们自己去了解学习后发现,并没有想象中那么难,今天就一起总结一下各种排 ...
- response.sendRedirect 报 java.lang.IllegalStateException 异常的解决思路
今天在进行代码开发的时候,出现了 java.lang.IllegalStateException异常,response.sendRedirect("./DEFAULT.html") ...
- iOS开发寻找最近公共view
新技能 #pragma mark --寻找最近公共view + (NSArray *)superViews:(UIView *)view{ if (view==nil) { return @[]; } ...
- C语言 动态数组实现
一.概述 C语言是不能直接定义动态数组的,数组必须在初始化时确定长度. 如果要在程序运行时才确定数组的长度,就需要在运行的时候,自己去向系统申请一块内存用动态内存分配实现动态数组. 二.动态内存分配函 ...
- 虚拟机Linux 的一些基础命令和注释
cd命令 cd ==回到初始,主目录 cd - ==回到上一级目录交替 cd ~ ==回到root家目录 cd . ==当前目录 cd .. ==进入上一级目录 ls命令 ls == ...
- 手机自动化测试:appium源码分析之bootstrap九
手机自动化测试:appium源码分析之bootstrap九 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣, ...
- 关于WdatePicker.js的结束时间大于开始时间
简单笔记 : WdatePicker.js 要使结束时间大于开始时间只要在线束时间的 minDate:'#F{$dp.$D(\'stimeParam\')}' 即可:不多说 详细代码如下: <t ...
- MySQL flashback 功能
1. 简介 mysqlbinlog flashback(闪回)用于快速恢复由于误操作丢失的数据.在DBA误操作时,可以把数据库恢复到以前某个时间点(或者说某个binlog的某个pos).比如忘了带wh ...
- Java基础学习(六)—List
一.List 1.List集合特有功能 /* * List集合的特有功能: * A:添加功能 * void add(int index,Object element):在指定位置添加元素 * B:获取 ...