一:原型和原型对象:

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. 用js实现图片的无缝滚动效果

    实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...

  2. bash变量

    bash中的变量的种类 根据变量的生效范围等标准 本地变量:生效范围为当前shell进程:对当前shell之外的其它shell进程,包括当前shell的子shell进程均无效: 环境变量:生效范围为当 ...

  3. vue-router2.0动态路由获取参数

    一下demo演示2.0中的vue-router是如何获取到不同参数的,并在地址栏中匹配不同的信息 <!DOCTYPE html> <html lang="en"& ...

  4. CodeFirst的一些操作!!

    CodeFirst的一些操作!! 转载 2016-08-05 21:03:32 1 首先是codefirst怎么做,这个首先肯定要引入EntityFramework,然后在model中创建实体类,例如 ...

  5. MongoDB基础教程系列--第一篇 进入MongoDB世界

    1.什么是MongoDB MongoDB是跨平台的.一个基于分布式文件存储的数据库.由C++语言编写.用它创建的数据库具备性能高.可用性强.易于扩展等特点.MongoDB将数据存储为一个文档,数据结构 ...

  6. Java并发基础:进程和线程之由来

    转载自:http://www.cnblogs.com/dolphin0520/p/3910667.html 在前面,已经介绍了Java的基础知识,现在我们来讨论一点稍微难一点的问题:Java并发编程. ...

  7. bootstrap(响应式)加减输入框

    <div class="row">  <div class="col-lg-6">    <div class="inp ...

  8. 简单 fibonacci 函数

    public static int fibonacci(int n){  if(n<=1) return 1;  else {     return fibonacci(n-1)+fibonac ...

  9. 详解Executor框架

    在Java中,使用线程来异步执行任务.Java线程的创建与销毁需要一定的开销,如果我们为每一个任务创建一个新线程来执行,这些线程的创建与销毁将消耗大量的计算资源.同时,为每一个任务创建一个新线程来执行 ...

  10. 【算法】RMQ LCA 讲课杂记

    4月4日,应学弟要求去了次学校给小同学们讲了一堂课,其实讲的挺内容挺杂的,但是目的是引出LCA算法. 现在整理一下当天讲课的主要内容: 开始并没有直接引出LCA问题,而是讲了RMQ(Range Min ...