• javascript-this,call,apply,bind简述1


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

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

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

    1 this===window    //true
    2 function fn(){
    3 
    4      return this;                  
    5 }
    6 fn()===window    //true

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

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

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

    1 var obj={
    2 
    3      age:30,
    4      fn:function(){
    5          return this.age
    6     }
    7 }    
    8 obj.fn()    //30

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

     1 var obj={
     2 
     3      age:30,
     4      fn:function(){
     5         return this    //此时this指向window
     6         return this.age
     7      }
     8  }    
     9 var f=obj.fn;
    10  f.fn()    //undefind

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

        3.构造器中的this

     1 function Class(){
     2       this.age=30
     3 }
     4 var man=new Class()    //man.age=30
     5 
     6 
     7 function Class2(){
     8       this.age=30
     9       return {age:38}
    10 }
    11 var man2=new Class2()    //man2.age=38

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

        4.对象原型链上的this

    a.构造函数的prototype

     1 function Fn(name,age){
     2        this.name=name;
     3        this.age=age  
     4 }
     5 Fn.prototype.getName=function(){
     6 
     7        console.log(this.name)   
     8 }
     9 var f1=new Fn("Lebro",30);
    10 f1.getName()    //Lebro

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

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

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

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

     1 var obj={
     2 
     3      a:10
     4 }
     5 var fn=function(){
     6 
     7      console.log(this)
     8 }
     9 
    10 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状态栏冒泡
    JavaScript动态显示时间
    正则表达式
    JavaScript数组的最大长度
    加密(编码)web.config中的信息(如:连接字符串)
    JavaScript实现EMAIL功能
    JavaScript检测分辨率
    JavaScript如何给网页滚动条加上颜色?
  • 原文地址:https://www.cnblogs.com/wangxiaosan/p/5512325.html
Copyright © 2020-2023  润新知