zoukankan      html  css  js  c++  java
  • JS中this的用法


    本文实例讲述了JS函数this的用法。分享给大家供大家参考。具体如下:
    在js中写函数时,很多用到this. this究竟是什么,this是个关键字,是个指针,指向执行环境作用域,也称之为上下文。
    先说下函数吧,个人理解是函数是在语言中重复调用的代码块.
    在JS里,把函数赋值给对象的属性时,称之为方法
    如:

    var m={};
    m.title='title';
    m.show=function(){
    alert(this.title)
    }
    m.show()
    就是把函数作为对象m的方法来调用
    这样的话,this指向的就是m这个对象.
    直接调函数名的叫函数:

    var a=1212;
    function show(){
    alert(a)//1212
    }
    show()// 1212
    在全局环境里,可以把全局变量理解为window的属性,全局函数为window的方法
    看下面的例子:

    var m ={};
    m.id='mmm';
    m.show=function(){
    alert(this.id);
    }
    var a={};
    a.id='aaa';
    a.show=m.show;
    a.show(); //aaa

    a.show=m.show; 先理解这句话,因为函数是个对象,
    m.show=function(){
    alert(this.id)
    }
    这表达式相当于a.show 与m.show同时引用指向

    function(){
    alert(this.id)
    }
    其实相当于

    a.show=function(){
    alert(this.id)
    }
    所以调用a.show()时,this指向的是a对象,
    再看以下一个栗子

    var m ={};
    m.id='mmm'
    m.show=function(){
    alert(this.id)
    }
    var a={}
    a.id='aaa'
    a.show=function(){
    m.show()
    };
    a.show(); //mmm
    所以调用a.show()时,相当于调用了m.show()的方法,所以this.指向的是m对象。
    再看以下一个例子,一开始还是不很懂

    var color='red';
    var app = {};
    app.color="green";
    app.paint=function(node){
    node.style.color=this.color;
    alert(this.color);
    }
    function findNode(callback){
    var btn =document.querySelector('.btn');
    callback(btn);//传进来,
    }
    findNode(app.paint);
    alert(this.color); //red 而不是green
    函数传参时,是按值传参的,而不是引用
    所以findNode(app.paint);传进来时,其实是

    function(node){
    node.style.color=this.color;
    alert(this.color);
    }
    的引用,又因为findNode是全局定义的,所以this指向WINDOW OR UNDEFINED;
    关于传参,按值传递过去的

    function show(a){
    alert(a)
    }
    参数为基本数据类型时好理解

    var b=10;
    show(b)//alert(10);
    至于对象

    var c ={};
    c.prop=true;
    var showProp=function(obj){
    obj.prop=false
    }
    showProp(c); //c.prop = false
    有些人觉得是上面例子是按引用传参
    其实上面还是按值传参,showProp(c)把c传进函数里时,c其实相当于一个引用, 函数里对obj.prop=false,相当于对引用的对象 改成{prop:false}
    再看下面一例子

    var c ={};
    c.prop=true;
    var showProp=function(obj){
    obj = new Object();
    obj.prop=false
    return obj;
    }
    showProp(c);
    alert(c.prop); //true
    这里明明把传入obj修改了,如果按照函数按引用传参,函数里面的修改肯定会反映到外部
    希望本文所述对大家的javascript程序设计有所帮助。

  • 相关阅读:
    selenium + python网页自动化测试环境搭建
    工作总结
    脚本测试总结
    一些知识
    反相器
    递归算法设计
    什么是递归
    CSS3弹性盒模型布局模块
    小方法
    第24章 最佳实践
  • 原文地址:https://www.cnblogs.com/DarkInNight/p/6692440.html
Copyright © 2011-2022 走看看