一:原型和原型对象:

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的详解的更多相关文章

  1. js中原型和原型链

    1.原型: 在JavaScript 中,对象被表现为prototype . 原型其实一直存在于我们接触过的任何一个对象. 2. Tip:在函数对象中也存在__proto__属性,但是查看函数对象的原型 ...

  2. JavaScript中原型和原型链

    原型[prototype]: 为其他对象提供共享属性的对象. 每个函数都有一个原型(prototype)属性,这个属性是一个指针,指向一个对象,这个对象包含特定实例共享的一些属性和方法. 以例服人: ...

  3. JS 面向对象之继承 -- 原型链

    ECMAScript只支持实现继承,其实现继承主要是靠原型链来实现. 原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 简单回顾下构造函数.原型和实例的关系: 每个构造函数都有 ...

  4. JavaScript的面向对象原理之原型链详解

    一.引言 在16年的10月份,在校内双选会找前端实习的时候,hr问了一个问题:JavaScript的面向对象理解吗?我张口就说“JavaScript是基于原型的!”.然后就没什么好说的了,hr可能不知 ...

  5. JavaScript的面向对象原理之原型链

    二.JavaScript的对象 为了能够清楚的解释这一切,我先从对象讲起.从其他面向对象语言(如Java)而来的人可能认为在JS里的对象也是由类来实例化出来的,并且是由属性和方法组成的. 实际上在JS ...

  6. 泛型编程、STL的概念、STL模板思想及其六大组件的关系,以及泛型编程(GP)、STL、面向对象编程(OOP)、C++之间的关系

    2013-08-11 10:46:39 介绍STL模板的书,有两本比较经典: 一本是<Generic Programming and the STL>,中文翻译为<泛型编程与STL& ...

  7. Javascript 构造函数、原型对象、实例之间的关系

    # Javascript 构造函数.原型对象.实例之间的关系 # 创建对象的方式 # 1.new object() 缺点:创建多个对象困难 var hero = new Object(); // 空对 ...

  8. JS prototype chaining(原型链)整理中······

    初学原型链整理 构造器(constructor).原型(prototype).实例(instance); 每一个构造器都有一个prototype对象,这个prototype对象有一个指针指向该构造器: ...

  9. JS对象继承与原型链

    1.以复制方式实现的继承 1.1浅拷贝 基本类型的复制 var parent = { lanage: "chinese" } var child = { name: "x ...

随机推荐

  1. spring+mybatis之声明式事务管理初识(小实例)

    前几篇的文章都只是初步学习spring和mybatis框架,所写的实例也都非常简单,所进行的数据访问控制也都很简单,没有加入事务管理.这篇文章将初步接触事务管理. 1.事务管理 理解事务管理之前,先通 ...

  2. WIMP环境搭建

    h1 { color: #3366ff } p { font-size: 16px } body { background-color: rgb(200,200,169) } 环境说明 系统:wind ...

  3. 结队编程study

    ##今天针对study进行结队编程,我和搭档张佳慧刚开始误认为SystemBarTintManager,baseActivity是personalActivity跳转的下一个界面,因为这个代码个人中心 ...

  4. inux的进程-进程的概念和fork创建进程

    一.  什么是进程? 初学者,可能认为程序或者一段代码就是一个进程.其实这样说是很不全面的,进程简单的说就是一个个条件. 1.需要一个代码 2.需要运行这个代码环境和资源 从下面的一段代码,我们来分析 ...

  5. rxjava2学习笔记(1)

    1.什么是RxJava? 简单,清晰的多线程编程框架.可方便的写出维护性高,逻辑清晰的Java程序. 2.什么是观察者模式? 入门教程讲这种高大上抽象概念都是耍流氓! 3.开始 3.1github地址 ...

  6. BroadcastReceiver简单应用实例

    BroadcastReceiver是android四大组件之一,主要用于接收广播,它的简单实现方法如下: 1.定义继承BroadcastReceiver的MyReceiver类: /** * Crea ...

  7. java 基础知识十 继承和多态

    java  基础知识十   继承和多态 继承 1.定义: 继承是指声明一些类,可以再进一步声明这些类的子类,而子类具有父类已经拥有的一些方法和属性,这跟现实中的父子关系是十分相似的,所以面向对象把这种 ...

  8. 使用JS实现鼠标悬浮切换显示

    实现的是在鼠标悬停在不同链接上,在同一位置切换显示想要显示的内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  9. Java -- 浅入Java反射机制

    1,Java 反射是Java语言的一个很重要的特征,它使得Java具体了"动态性". Java 反射机制主要提供了以下功能: 在运行时判断任意一个对象所属的类. 在运行时构造任意一 ...

  10. script defer和async一探

    今天几经折腾,终于回家了,最近公司上的事忙了好一阵子,终于可以闲下来,重新在整理一下,又重新了解了一下defer和async在页面加载过程差异. 定义和用法 async 属性规定一旦脚本可用,则会异步 ...