• this工作原理


    this是JavaScript语言中的一个关键字

    在JavaScript语言中,this可以是全局对象、当前对象或其它任意对象。在AJAX中,this指向Window全局对象;而在Backbone中,this指向extend扩展的当前对象

    函数运行时会生成一个内部对象,该对象只在函数内部使用;一般来说,this正是指代该对象

    函数使用场合不同,this值会发生变化,无论如何,有个原则:this总是指向调用函数的那个对象

    普通函数调用

    属于全局调用,this指向Window全局对象。先看如下代码所示

    var Get_Sex = function ()
    {
    	this.sex = 'man';
    	console.log(this, this.sex);
    };
    Get_Sex();

    输出结果为Window全局对象与man;相当于我们在函数外部声明了一个变量sex。代码如下所示

    var sex = 'man';
    var Get_Sex = function ()
    {
    	console.log(this, this.sex);
    };
    Get_Sex();
    

    输出结果同上

    作为对象方法调用

    属于当前对象的一个方法调用,this指向该方法属于的当前对象。代码如下所示

    var $Get_Color = {
    	color: 'orange',
    	get  : function ()
    	{
    		console.log(this, this.color);
    	}
    };
    $Get_Color.get();
    

    输出结果为Object当前对象与orange;this正是指向$get_color这个对象本身

    作为构造函数调用

    通过函数生成一个新对象,就叫做构造函数,this指向这个新建的当前对象。先看如下代码所示

    var Get_Number = function ()
    {
    	this.number = 250;
    	console.log(this, this.number);
    };
    var $Number = new Get_Number();
    

    输出结果为转化为当前对象的Get_Number与250;而新对象$Number等价于转化为当前对象的Get_Number。代码如下所示

    var Get_Number = function ()
    {
    	this.number = 250;
    };
    var $Number = new Get_Number();
    console.log($Number, $Number.number);
    

    输出结果同上

    apply与call调用

    apply与call是Function.prototype(JavaScript内置对象的原型)中的方法,作用是改变调用函数的对象,它们的第一参数就代表改变后的调用这个函数的对象,而this指向被显式设置为第一参数。先看如下代码所示

    var $Get_Time = {
    	time: new Date().getTime(),
    	get : function ()
    	{
    		console.log(this, this.time);
    	}
    };
    $Get_Time.get.apply($Get_Time);

    输出结果为Object当前对象与时间戳;而参数为空时,默认调用Window全局对象。代码如下所示

    var $Get_Time = {
    	time: new Date().getTime(),
    	get : function ()
    	{
    		console.log(this, this.time);
    	}
    };
    $Get_Time.get.apply();
    

    输出结果为Window全局对象与null

  • 相关阅读:
    远程网络时间同步在分布式测控与实时仿真系统应用
    GPS对时装置(北斗卫星同步时钟)应用市场调研分析
    时间同步服务器(NTP时钟同步服务器)如何正确的选购?
    NTP授时服务器(卫星同步时钟)与物联网十大应用
    App 自动化环境搭建(基于 Appium)
    let var作用域
    vue methods和computed效率比较
    vue computed
    vue computed
    vue v-bind:style
  • 原文地址:https://www.cnblogs.com/johnl/p/4849624.html
Copyright © 2020-2023  润新知