最近在系统的学习面向对象方面的知识,遇到的最大拦路虎就数this的指向,call,apply,bind函数的使用,单独抽出一天时间把这几个烦人的家伙搞定,去学习更深入的内容。

    首先介绍一下this的一些东西,this和call还有莫大的关系,在第一节先不讨论这两在一起的情况。先看看this的应用场景(快餐选手可以直接跳过看后边的总结,一下这些代码只是我学习总结的过程)

    1.全局作用域和一般函数

 this===window    //true
function fn(){ return this;
}
fn()===window //true

可以看到,全局作用域中的this和一般函数里边的this指向都是指向window的。

    2.函数作为对象的一个属性

函数作为对象的一个属性,并且作为对象的一个属性被调用时,函数中的this指向该对象,如下代码this指向了作用域所在的对象obj。。

 var obj={

      age:30,
fn:function(){
return this.age
}
}
obj.fn() //

那函数不作为对象的属性调用呢,看代码:

 var obj={

      age:30,
fn:function(){
return this //此时this指向window
return this.age
}
}
var f=obj.fn;
f.fn() //undefind

该函数的调用是作为定义的全局对象f来执行的,和上边的一般函数的调用实质上是一样的,所以this也会指向window

    3.构造器中的this

 function Class(){
this.age=30
}
var man=new Class() //man.age=30 function Class2(){
this.age=30
return {age:38}
}
var man2=new Class2() //man2.age=38

这里的this代表new出来的那个对象。new会返回一个对象,如果这个对象未定义,则默认return出this对象,在Class2这个构造函数中,如果返回值只有一个age,其他属性是不能调用的,这就可以解释为什么this是new出来的对象,可以自己试一下。

    4.对象原型链上的this

a.构造函数的prototype

 function Fn(name,age){
this.name=name;
this.age=age
}
Fn.prototype.getName=function(){ console.log(this.name)
}
var f1=new Fn("Lebro",30);
f1.getName() //Lebro

b.在整个原型链继承上的this

 var  obj={

       fn:function(){
return this.a+this.b
}
}
var p=Object.creat(obj); //对象p继承了obj的fn函数
p.a=1;p.b=2;
p.fn() //

由此可见,不管是构造函数的prototype,即便是在整个原型链继承中,this代表的也都是当前对象。

    5.call()/apply()上的this

 var obj={

      a:10
}
var fn=function(){ console.log(this)
} fn.call(obj); //{a:10}

当一个函数被call和apply调用时,this的值就取传入的对象的值。我也觉得有点拗口,下节把这几个兄弟再仔细解析一下他们的用法。

总结:this的取值是在函数调用时确定的,在函数声明阶段无法确定(说了一句废话,this设计出来就是为了复用,如果声明阶段就确定了那复用就无从谈起)。

   this总是指向调用this所在函数的那个对象或者作用域。

     这句话其实也是符合call函数的,定义:调用一个对象的一个方法,以另一个对象替换当前对象,在上述例子中其实就是用对象obj替代window来调用fn函数,因此fn里的this就指向调用fn的那个对象obj。this大概有点眉目了吧,下一步就解决三巨头的问题。。。

javascript-this,call,apply,bind简述2 http://www.cnblogs.com/wangxiaosan/p/5513302.html

javascript-this,call,apply,bind简述1的更多相关文章

  1. javascript-this,call,apply,bind简述2

    上节我们一起研究了this这个小兄弟,得出一个结论,this指向调用this所在函数(或作用域)的那个对象或作用域.不太理解的朋友可以看看上节的内容,这次我们主要探讨一下call(),apply(), ...

  2. javascript中call,apply,bind的用法对比分析

    这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们.   关于call,apply,bind这三个函数的用法,是学习java ...

  3. JavaScript中call,apply,bind方法的总结。

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...

  4. JavaScript中call,apply,bind方法的总结

    原文链接:http://www.cnblogs.com/pssp/p/5215621.html why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之 ...

  5. JavaScript中call,apply,bind方法的区别

    call,apply,bind方法一般用来指定this的环境. var a = { user:"hahaha", fn:function(){ console.log(this.u ...

  6. JavaScript中call,apply,bind方法

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...

  7. JavaScript 之 call apply bind

    关键字 this 绑定的方法 this的动态切换,固然为JavaScript创造了巨大的灵活性,但也使得编程变得困难和模糊.有时,需要把this固定下来,避免出现意想不到的情况.JavaScript提 ...

  8. javascript-this,call,apply,bind简述3

    上节介绍了call()和apply()的用法,这节再讨论一下arguments参数和bind函数的用法以及函数柯里化就算是完结了. bind()函数 先看定义: bind()方法会创建一个函数的实例, ...

  9. javascript中call,apply,bind的使用

    不同点: 1.call():传参方式跟bind一样(都是以逗号隔开的传参方式),但是跟apply(以数组的形式传参)不一样, 2.bind(): 此方法应用后的情形跟call和apply不一样.该方法 ...

随机推荐

  1. 理解RxJava:(一)基础知识

    理解RxJava:(一)基础知识 本文翻译自Grokking RxJava, Part 1: The Basics,著作权归原作者danlew所有.译文由JohnTsai翻译.转载请注明出处,并保留此 ...

  2. 二十七(序幕)、【开源】EFW框架破茧成蝶

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://p ...

  3. sql server版本

    10.00.1600 :SQL 2008 10.50.1600:SQL 2008 R2 10.50.2500:SQL 2008 R2 SP1

  4. Go加密解密之RSA[转]

    安全总是很重要的,各个语言对于通用的加密算法都会有实现.前段时间,用Go实现了RSA和DES的加密解密,在这分享一下.(对于RSA和DES加密算法本身,请查阅相关资料) 在PHP中,很多功能经常是一个 ...

  5. 解决Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future:

    php 5个版本,5.2.5.3.5.4.5.5,怕跟不上时代,新的服务器直接上5.5,但是程序出现如下错误:Deprecated: mysql_connect(): The mysql extens ...

  6. 自己动手搭建 MongoDB 环境,并建立一个 .NET HelloWorld 程序测试

    关于 MongoDB,下面来自百度百科: MongoDB[1]是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案.   mongoDB[1] Mon ...

  7. vim 图解常用快捷键操作

    图片太大,可以将图片另存后看或者右键点击,选择查看图片.

  8. Android学习笔记之布局技巧以及布局中的细节介绍....

    PS:休息两天,放一放手上的东西,做做总结... 学习内容: 1.Android中LinearLayout布局技巧... 2.layout中drawable属性的区别...   先简单的介绍一下dra ...

  9. HT图形组件设计之道(三)

    上篇我们通过定制了CPU和内存展示界面,体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动,这类案例后续文章还会继续以便大家掌握更多的矢量应用场景,本篇我们先切换个话题, ...

  10. Node之pm2

    最近在项目中使用了Node,在程序部署的时候直接使用命令:node app.js ,这样我们的程序就可以host起来了,但是只要dos窗口关掉之后node就关闭了,这使得我们很不方便,于是乎发现了pm ...