js 中的this

最新推荐文章于 2021-02-16 14:00:24 发布
最新推荐文章于 2021-02-16 14:00:24 发布
阅读量371 收藏 1
点赞数
分类专栏： this JAVASCRIPT
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lulalahappy123/article/details/48271037
版权

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

1、纯粹函数调用。

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

其实这里的this就是全局变量。看下面的例子就能很好的理解其实this就是全局对象Global。

复制代码 
var x = 1;
function test() {
    alert(this.x);
}
test();//1

var x = 1;
function test() {
    this.x = 0;
}
test();
alert(x);//0
复制代码

2、作为方法调用，那么this就是指这个上级对象。

复制代码 
function test() {
    alert(this.x);
}

var o = {};
o.x = 1;
o.m = test;
o.m(); //1
复制代码

3、作为构造函数调用。所谓构造函数，就是生成一个新的对象。这时，这个this就是指这个对象。

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

4、apply调用

this指向的是apply中的第一个参数。

复制代码 
var x = 0;
function test() {
    alert(this.x);
}

var o = {};
o.x = 1;
o.m = test;
o.m.apply(); //0
o.m.apply(o);//1
复制代码

当apply没有参数时，表示为全局对象。所以值为0。


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
 //不用构造函数 Obj中的this 指向的是window
 /* var Obj = function(msg){

     this.msg = msg;

     this.shout = function(){
     alert(this.msg);
     };
     this.waitAndShout = function(){
     setTimeout(this.shout(),5000);//隔五秒钟后执行上面的shout方法
     }
     };
     Obj("shouting").shout();

//为了指向Obj 想到了用构造函数*/
//一、人人都会想到的写法：但不会延时
var Obj = function(msg){

    this.msg = msg;

    this.shout = function(){
        alert(this.msg);
    };
   this.waitAndShout = function(){
        setTimeout(this.shout(),5000);//隔五秒钟后执行上面的shout方法
    }
};
var a=new Obj("shouting");//this指向Obj 函数里的this 都指向Obj
a.waitAndShout();//this指向window
 /*
//二、为了延时，在setTimeout里写上函数function(){}的形式
//报错this.shout is not a function 说明setTimeout中的this 没有指向Obj 接下来看看this指向了哪里
/*var Obj = function(msg){

 this.msg = msg;

 this.shout = function(){
 alert(this.msg);
 };
 this.waitAndShout = function(){

 setTimeout(function(){this.shout()},5000);//隔五秒钟后执行上面的shout方法 报错this.shout is not a function
 }
 };
 var a=new Obj("shouting");//this指向Obj 函数里的this 都指向Obj
 a.waitAndShout();//this指向window*/

// 三alert一下，说明函数的函数this指向window
/*
var Obj = function(msg){

 this.msg = msg;

 this.shout = function(){
 alert(this.msg);
 };
 this.waitAndShout = function(){

 setTimeout(function(){alert(this)},5000);//隔五秒钟后执行上面的shout方法
 }
 };
 var a=new Obj("shouting");//this指向Obj 函数里的this 都指向Obj
 a.waitAndShout();//this指向window
*/


    //四 为了让this 指向 Obj 定义一个局部变量，
    // 由于 构造函数定以后，this 指向Obj；所以局部变量that也指向Obj
    // 成功
/*var Obj = function(msg){

 this.msg = msg;

 this.shout = function(){
 alert(this.msg);
 };
 this.waitAndShout = function(){
   var that=this;
 setTimeout(function(){that.shout()},5000);//隔五秒钟后执行上面的shout方法
 }
 };
 var a=new Obj("shouting");//this指向Obj 函数里的this 都指向Obj
 a.waitAndShout();//this指向window*/

  //考虑在setTimeout函数内部将 指向Obj的this传进去，然后 将self=this
/* var Obj = function(msg){
     this.msg = msg;
     this.shout = function(){
         alert(this.msg);
     };
     this.waitAndShout = function(){
         setTimeout(function () {
             var self = this;
             return function () {
                 self.shout();
             }
         }.call(this), 5000);
     }
 };
 var a=new Obj("shouting");//this指向Obj 函数里的this 都指向Obj
 a.waitAndShout();//this指向window*/


 //如果不用self = this；仅仅是将指向Obj的this 传进去；函数的函数 用this this还是指向window;
 // 只有 函数1 的 函数2 之间的this才指向函数1内this该指的对象；由于call已经将this-》Obj传入
 //所以函数1 内this 指向就是Obj

/* var Obj = function(msg){
     this.msg = msg;
     this.shout = function(){
         alert(this.msg);
     };
     this.waitAndShout = function(){
         setTimeout(function () {

             return function () {
                alert(this);
             }
         }.call(this), 5000);
     }
 };
 var a=new Obj("shouting");//this指向Obj 函数里的this 都指向Obj
 a.waitAndShout();//this指向window*/

//不要函数的函数；this 就是call传进来的this  这样 alert就是window 说明我想的是正确的
/* var Obj = function(msg){
      this.msg = msg;
      this.shout = function(){
        alert(this.msg);
      };
      this.waitAndShout = function(){
            setTimeout(function () {
                    alert(this);

            }.call(this), 5000);
      }
  };
  var a=new Obj("shouting");//this指向Obj 函数里的this 都指向Obj
  a.waitAndShout();//this指向window*/



//不用构造函数 此法不太好 污染window对象；但是可以实现，关键是return this;

 //加不加var that=this 结果都是一样的； 因为this一直指向的是window ;
 // this 和that 都指向window
 //而 return this 是吧this 返回到window中
 //所以that 其实也指的window 只不过，Obj的变量都变成全局的了

/* var Obj = function(msg){
     this.msg = msg;
     this.shout = function(){
         alert(this.msg);
     };
     this.waitAndShout = function(){

         setTimeout(function(){this.shout()}, 5000);
         //隔五秒钟后执行上面的shout方法
     };
     return this;
 };
 Obj("shouting").waitAndShout();*/
</script>
</body>
</html>


梦jenny
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中this用法实例详解
12-12
本文实例讲述了js中this用法。分享给大家供大家参考。具体如下： 1. 指向window 全局变量 alert(this) //返回 [object Window] 全局函数 function sayHello(){ alert(this); } sayHello(); 2. ...
老生常谈 js中this的指向
10-22
下面小编就为大家带来一篇老生常谈 js中this的指向。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript中this关键字使用方法详解
weixin_33919941的博客
03-07 269
    在面向对象编程语言中，对于this关键字我们是非常熟悉的。比如C++、C#和Java等都提供了这个关键字，虽然在开始学习的时候觉得比较难，但只要理解了，用起来是非常方便和意义确定的。JavaScript也提供了这个this关键字，不过用起来就比经典OO语言中要"混乱"的多了。    下面就来看看，在JavaScript中各种this的使用方法有什么混乱之处？    1、在HTML元素事件属...
vue this[msg]
weixin_30732487的博客
10-26 212
vue this[msg] msg为data中的属性 必须是字符串 this['msg'] = this.msg 转载于:https://www.cnblogs.com/-maomao-/p/7736587.html
vue消息提示this.$message方法
热门推荐
云的博客
03-24 12万+
//弹出信息 alertMessage(action,a){ var msg,type; switch(a){ case '1': type='success'; msg = ...
Vue模板语法2
Mia的博客
04-22 127
属性绑定 this.msg = event.target.value; 使用输入域中最新的数据覆盖原来的数据 样式绑定 class样式处理： 对象绑定和数组绑定可以结合使用 class绑定的值可以简化操作 默认的class会保留 style样式处理： 分支结构 v-show的原理：控制元素样式是否显示 类似于display:none or block 循环结构 tab栏案例(声明式...
vue.js基础（3）
Jy123_的博客
09-07 98
生命周期函数演示 什么是生命周期：从vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这样事件，统称为生命周期！ 生命周期钩子=生命周期函数=生命周期事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
js中this对象用法分析
11-29
在JavaScript中，`this`对象是一个非常关键的概念，它用于标识函数执行时的上下文，即函数被哪个对象调用。`this`的值不是在函数定义时确定，而是在函数执行时根据函数的调用方式动态绑定。下面将详细讨论几种常见的...
javascript中this指向详解
10-22
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象，接下来我会深入的探讨这个问题。
js中this的指向问题
01-08
js中this的指向问题 常见的大概有以下几种情况： 全局作用域、普通函数以及定时器中的this指向全局对象window 方法中的this指向的是调用它的对象 构造函数中的this指向构造函数的实例 箭头函数中没有绑定this，this...
聊一聊vue的双向数据绑定，为啥子this.message和this._data.message 都能访问到呢？都发生了什么呢
weixin_43962555的博客
03-15 1722
初入vue 的大门，对vue 在data 中定义一个值，在DOM 中通过双花括号{{}} 就可以访问的到，对此我是很好奇的，本着好奇的心思，打开了vue 的源码，探索这个奇妙的过程。 问题的根源就在于这个方法： Object.defineProperty（）定义对象的属性相关描述符， 其中的set和get函数对于完成数据双向绑定起到了至关重要的作用。 下面我们就通过一个简单的例子来解释一个这个方法...
Vue实例中this的指向问题
富尔牛的博客
08-14 2091
首先让我么看一些代码，先不要往下看，你自己先想一下这里的this分别指的是什么。 <script> var msg = '我是window下的msg' var vm = new Vue({ el: '#app', data: { msg: '我是vm实例中的msg' ...
[转]element中this.$message 失效问题解决方法（使用全局调用，重新定义this）(转载请删除括号里的内容)
jiaoqi6132的博客
06-23 8883
这两天写项目的时候发现了这个问题。 问题再现：在Model框中操作数据，在使用this.$message进行消息提示时发现，提示框失效 。 本人解决方案（具体原因我没有找出来，写这个出来也是为了让大佬指点指点） // 保存修改数据 handleSaveMu(row) { let srcColumnSqc = row.srcColumnSqc; let tarColumnName = row.tarColumnName; ...
JavaScript面试题系列_this的转移
weixin_40888956的博客
03-12 504
说明一下： 如果对this没有了解时，最好先阅读这篇文章：javascript_this的理解，否则，下面的描述会很难理解，甚至会打击你的积极性。 面试题： 请解读一下javascript代码，并指出问题所在 var Obj=function(msg){ this.msg=msg; this.shout=function(){ alert(this.m...
JavaScript面试题81-90
Ashy- 在这里成长
02-16 269
JavaScript面试题81-90 每日坚持学10道题 81. [问答题] 尝试实现注释部分的 Javascript 代码，可在其他任何地方添加更多代码（如不能实现，说明一下不能实现的原因）： var Obj = function (msg) { this.msg = msg; this.shout = function () { alert(this.msg); } this.waitAndShout = function () { //
阿里笔试题（三）
luby_xu的世界
08-08 618
题目： 尝试实现注释部分的Javascript代码，可在其他任何地方添加更多代码（如不能实现，说明一下不能实现的原因）：   var Obj = function(msg){     this.msg= msg;     this.shout= function(){        alert(this.msg);     }       this.waitAndShout=
关于this指向的一道题目
weixin_39407291的博客
11-11 179
尝试实现注释部分的 JavaScript 代码， 可在其他任何地方添加更多代码。 var Obj = function(msg) { this.msg = msg; this.shout = function () { alert(this.msg) } this.waitAndShout = function() { // 隔五秒钟...
04JavaScript面试题系列_this的转移
jiang7701037的博客
02-12 1519
说明一下：         如果对this没有了解时，最好先阅读这篇文章：javascript_this的理解，否则，下面的描述会很难理解，甚至会打击你的积极性。面试题：请解读一下javascript代码，并指出问题所在var Obj=function(msg){    this.msg=msg;    this.shout=function(){alert(this.msg);}this.wai...
js中this面试题
最新发布
09-01
在JavaScript中，关于this的面试题有很多。这里列举一些常见的问题： 1. 解释JavaScript中this的指向。 2. 什么是隐式绑定？请举个例子。 3. 什么是显式绑定？请举个例子。 4. 什么是箭头函数的this指向？与普通...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值