zoukankan      html  css  js  c++  java
  • JavaScript语言精粹读书笔记之函数调用与this

    JavaScript语言精粹读书笔记之函数调用与this

    看到javascript语言精粹函数那一章,对函数调用进行了总结,受益匪浅。

    JavaScript中一共有四种调用模式:方法调用模式,函数调用模式,构造器调用模式和apply调用模式。

    方法调用模式:

    当一个函数被保存为对象的一个属性时,我们称它为一个方法。当一个方法被调用时,this被绑定到该对象。

     

    函数调用模式:

    当一个函数并非一个对象的属性时,那么它被当作一个函数来调用。

    var sum = add(3, 4);

    构造器调用模式:

    如果在一个函数前面带上new来调用,那么将创建一个隐藏链接到该函数的prototype成员的新对象,同时this将会被绑定到那个新对象上。

    //创建一个名为Quo的构造函数,它构造一个带有status属性的对象

    var Quo = function(string) {

        this.status = string;

    };

    //给Quo的所有实例提供一个名为get_status的公共方法

    Quo.prototype.get_status = function() {

        return this.status;

    }

    //构造一个Quo实例

    var myQuo = new Quo("confused");

    document.writeln(myQuo.get_status());

    Apply调用模式:

    apply方法让我们构建一个参数数组并用其去调用函数,它也允许我们选择this的值。apply方法接收两个参数,第一个是将被绑定给this的值,第二个就是一个参数数组。

    var array = [3, 4];

    var sum = add.apply(null, array);

    this

    明白了函数的四种调用方式再来看this就清楚多了:在Javascript中,This关键字永远都指向函数。

    函数中的this

    function introduce() {

         alert("Hello");

    }

    定义在全局的函数,函数的所有者就是当前页面,也就是window对象。因为定义在全局的函数其实也就是window对象的一个方法。所以,我们即可用通过函数名直接调用也可用通过window。方法名来调用,这个时候方法中的this关键字指向它的所有者:window对象。

    事件处理函数中的this

    <input id="name" type="text" name="name" value="sharexie" /> 

    function showValue() {

         alert(this.value);

    }

    document.getElementById('name').onclick = showValue;

    showValue是定义在了全局对象,但是当onclick发生的时候发生了变化,在Js中一切都是对象,函数和方法也都是对象的属性,只不过函数有可执行的内部属性。所以,对于上面的代码,在对onclick绑定处理器的时候,其实是对idname的输入框Dom对象的onclick属性赋值。也就是说,我们把函数showValue Copy 给了name输入框对象的onclick属性。

    当事件触发的时候,就会去调用name输入框的onclick方法,这个时候,this关键字自然就指向的是name输入框了。

    但是这样写又会出现问题:

    function showValue() {

         alert(this.value);

    }

    <input id="name" type="text"  name="name" value="Laruence"  onclick="showValue()"/>

    因为这个时候,并不是赋值,而是引用 。

    改变this的指向

    对于上面的事件处理函数来说,我们可以有如下几种写法:

    dom.onclick = showValue;

    dom.onclick = function() { alert(this.value) ;}

    <input onclick="alert(this.value);" /> //想想刚才我们的引用,是如何把这句嵌入的.

    dom.addEventListener(dom, showValue, false); //ff only

    而对于不是事件处理函数的场合,我们可以使用apply,或者call, 来改变this关键字的指向。

    var sharexie = {

         name : 'sharexie',

    }; 

    function introduce() {

         alert(this.name);

    }

    introduce.call(sharexie);

     

     

     

     

     

  • 相关阅读:
    Smobiler如何实现.net一键开发,ios和android跨平台运行
    使用Smobiler实现类似美团的界面
    疫情当下,企业系统如何快速实现移动化?
    Smobiler针对百度文字识别SDK动态编译与运行
    smobiler自适应不同手机分辨率
    仓库管理移动应用解决方案——C#开发的移动应用开源解决方案
    移动OA办公——Smobiler第一个开源应用解决方案,快来get吧
    react-native 标题随页面滚动显示和隐藏
    react-native 键盘遮挡输入框
    解决adb网络连接中出现的“由于目标计算机积极拒绝,无法连接”错误
  • 原文地址:https://www.cnblogs.com/fredshare/p/2747935.html
Copyright © 2011-2022 走看看