几个例子搞定javascript的this作用域

kevin 发布于2019-08-22 10:48 / 3046人阅读

摘要：但是有一个总的原则，那就是指的是，调用函数的那个对象。纯粹的函数调用这是函数的最通常用法，属于全局性调用，因此就代表全局对象此时的是作为对象方法的调用函数还可以作为某个对象的方法调用，这时就指这个上级对象。

函数this的用法

his是Javascript语言的一个关键字。

它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如

function test(){
　　this.x = 1;
}

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

纯粹的函数调用

这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global

function test(){
　　this.x = 1;
　　alert(this.x);
}
test(); // 1 此时的this是window

var x = 1;
function test(){
　　alert(this.x);
}
test(); // 1

作为对象方法的调用

函数还可以作为某个对象的方法调用，这时this就指这个上级对象。

function test(){
　　alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); // 1

作为构造函数调用

所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。

function test(){
　　this.x = 1;
}
var o = new test();
alert(o.x); // 1

var x = 2;
function test(){
　　this.x = 1;
}
var o = new test();
alert(x); //2
alert(o.x); //1

函数的arguments

arguments属性是正在执行的函数的内置属性，返回该函数的arguments对象。arguments对象包含了调用该函数时所传入的实际参数信息(参数个数、参数值等)。
只有在当前函数正在执行时该属性才有效。

使用方法

arguments属性的值为Object类型，返回正在执行的当前函数的arguments对象。

arguments对象包含调用该函数时所传入的实际参数信息，例如：参数的个数和参数的值。我们可以通过arguments属性让函数处理可变数量的参数。

arguments对象有以下三个属性：

length属性，返回实际传入的参数个数。

callee属性，返回当前函数的引用(匿名函数可以使用该属性实现递归调用)。

0...n属性，以顺序索引访问传入的具体参数。例如，使用arguments[0]可以访问传入的第1个参数。

示例

function test(){
    document.writeln("实际传入的参数个数：" + arguments.length); // 实际传入的参数个数：3
    for(var i = 0; i < arguments.length; i++){
        document.writeln("传入的第" + (i + 1) +"个参数：" + arguments[i]);
    }
    // 传入的第1个参数：1 传入的第2个参数：张三 传入的第3个参数：true
    // callee属性返回的就是当前函数
    document.writeln( arguments.callee === test ); // true
};
test(1, "张三", true);

函数的call

使用方法

call()函数用于调用当前函数，并可同时使用指定对象thisObj作为本次执行时函数内部的this指针引用。

就是说fn.call(a1),是fn函数中的this指向a1

call()函数是将Function对象的参数一个个分别传入

示例

function foo(a, b){
    document.writeln(this.name);
    document.writeln(a);
    document.writeln(b);
}
// 改变this引用为obj，同时传递两个参数
foo.call(obj, 12, true); // 李四 12 true


function bar(a, b){
    var o = {name: "王五"};
    // 调用foo()函数，并改变其this为对象o，传入参数a,b作为其参数
    foo.call(o, a, b);
}
bar("CodePlayer", "www.365mini.com"); // 王五 CodePlayer www.365mini.com

函数的apply

使用方法

使用方法和作用与call()一样

注意apply()的参数必须是一个数组，或者arguments对象

示例

function foo(a, b){
    document.writeln(this.name);
    document.writeln(a);
    document.writeln(b);
}
// 改变this引用为obj，同时传递两个参数
foo.apply(obj, [12, true]); // 李四 12 true


function bar(){
    var o = {name: "王五"};
    // 调用foo()函数，并改变其this为对象o，传入当前函数的参数对象arguments作为其参数
    foo.apply(o, arguments);
}
bar("CodePlayer", "www.365mini.com"); // 王五 CodePlayer www.365mini.com

参考资料

javascript手册

this作用域

云服务器 GPU云服务器 this作用域 javascript作用域链 javascript的this python的作用域

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91290.html

一次搞定this和闭包

摘要：他的组成如下对的就是你关注的那个变量对象作用域链跟闭包相关由于是单线程的，一次只能发生一件事情，其他事情会放在指定上下文栈中排队。闭包和this，是两个相当高频的考点，然而你有没有想过，实际上他们两个都跟同一个知识点相关？有请我们的这篇文章的主角，执行上下文执行上下文执行上下文是什么可以简单理解执行上下文是js代码执行的环境，当js执行一段可执行代码时，会创建对应的执行上下文...

Airy 2019-08-22 16:08 评论0 收藏0
轻松搞定javascript中this的指向

摘要：调用在中，通过的形式调用一个构造函数，会创建这个构造函数实例，而这个实例的指向创建的这个实例。如下例所示，在构造函数内部使用并没有改变全局变量的值。显然，箭头函数是不能用来做构造函数。　　关于javascript中this指向的问题，现总结如下，如有不正确，欢迎指正。　　javascript中，this的指向并不是在函数定义的时候确定的，而是在其被调用的时候确定的。也就是说，函数的...

shinezejian 2019-08-23 12:14 评论0 收藏0
深入理解JavaScript，这一篇就够了

摘要：也就是说，所有的函数和构造函数都是由生成，包括本身。如果只考虑构造函数和及其关联的原型对象，在不解决悬念的情况下，图形是这样的可以看到，每一个构造函数和它关联的原型对象构成一个环，而且每一个构造函数的属性无所指。前言　　JavaScript 是我接触到的第二门编程语言，第一门是 C 语言。然后才是 C++、Java 还有其它一些什么。所以我对 JavaScript 是非常有感情的，毕...

villainhr 2019-08-26 17:04 评论0 收藏0
你需要知道面试中的10个JavaScript概念

摘要：自我学习目前有成千上万的年轻人在学习和开发，希望获得一份工作。知道的绑定规则。知道和原型属性是什么以及它们的作用。高阶函数了解函数是中的一级对象，这意味着什么知道从另一个函数返回函数是完全合法的。了解闭包和高阶函数允许我们使用的情况。翻译原文出处：10 JavaScript concepts you need to know for interviews 之前不是闹得沸沸扬扬的大漠穷...

YacaToy 2019-08-21 16:16 评论0 收藏0