zoukankan      html  css  js  c++  java
  • 深入解析Javascript中this关键字的使用

    深入解析Javascript中面向对象编程中的this关键字

    在Javascript中this关键字代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如:

    function TestFunction(){
        this.demoVal='This is  a demo variable';
    };
    View Code

    随着函数使用的场合不同,this的值会发生改变。但是有一个总的原则:this指的是调用函数的那个对象。

    接下来分情况讨论this关键字的使用:

    1. 纯粹的函数调用(这是函数的通常用法,属于全局性调用),this代表全局性对象Global.Demo程序如下:

    function TestFunction(){
        this.demoVal='This is a demo variable';
        alert(this.demoVal);
    };
    
    TestFunction();        //This is a demo variable
    View Code

    接下来证明此时的this代表全局对象,Demo程序如下:

    var globalVal='This is a demo global variable';
    
    function TestFunction(){
        alert(this.globalVal);
    };
    
    TestFunction();        //This is a demo global variable
    View Code

    2. 作为对象的方法调用(这时this指向上一级对象),Demo程序如下:

    function TestFunction(){
        alert(this.demoVal);
    };
    
    var obj={};
    obj.CallFunction=TestFunction;
    obj.demoVal='This is a object variable';
    
    obj.CallFunction();        //This is a object variable
    View Code

    3. 作为构造函数调用,所谓的构造函数就是通过这个函数生成一个新的Object对象。此时,this就是指向这个新对象。Demo程序如下:

    function TestFunction(){
        this.deomVal='This is a demo variable';
    };
    
    var obj=new TestFunction();
    
    alert(obj.deomVal);        //This is a demo variable
    View Code

    接下来的代码证明this不是指向全局对象:

    var demoVal='This is a global variable';
    
    function TestFunction(){
        this.demoVal='This is a local variable';
    };
    
    var obj=new TestFunction();
    
    alert(demoVal);        //This is a global variable
    View Code

    以上代码显示demoVal值根本没有改变,因此证明this不是指向全局的对象。

    4. 使用apply调用,apply函数可以改变函数的执行上下文,apply是函数对象的一个方法,它的作用是改变函数的调用对象,即函数的执行上下文。它的第一个参数表示改变后调用这个函数的对象, 因此,this指向的是第一个参数,Demo实例如下:

    var demoVal='This is a demo variable';
    
    function TestFunction(){
        alert(this.demoVal);
    };
    
    var obj={};
    obj.demoVal='This is an object demo variable';
    obj.TestFunction=TestFunction;
    
    obj.TestFunction.apply();    //This is a demo variable
    View Code

    apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为:'This is a demo variable',证明this指的是全局对象。

    如果将以上代码的最后一行改为:obj.TestFunction.apply(obj),则输出的结果为:'This is an object demo variable'。证明此时的this指向obj。

  • 相关阅读:
    Vue(七)-- 插件
    Vue(六)-- 过滤器、常用内置指令、自定义指令
    Vue(五)-- 生命周期
    Vue(四)-- 事件处理(绑定监听、按键修饰符、取消冒泡、阻止默认事件),v-model的使用
    Two Sum 两数之和
    使用原生JavaScript实现sleep函数
    感恩
    关于AJAX的总结和思考-2
    关于AJAX的一点总结与思考-1
    DNS解析和前端优化点之一
  • 原文地址:https://www.cnblogs.com/chengbing2011/p/4226285.html
Copyright © 2011-2022 走看看