• js闭包中的this(匿名函数中的this指向的是windows)


    js闭包中的this(匿名函数中的this指向的是windows)

    一、总结

    1、普通函数中的this指向的是对象,匿名函数中的this指向的是windows,和全局变量一样

    2、让匿名函数中的this指向对象的两种方法

    • 可以使用对象冒充强制改变this的指向
    • this赋值给一个变量,闭包访问这个变量

    二、js闭包中的this

    闭包中的this问题

    • 之前的课程中讲过this是在运行时基于函数的执行环境来绑定的
    • 全局函数中的this是window,而当函数作为某个对象的方法调用时,this就是指的那个对象......
    • 匿名函数的执行环境具有全局性,this通常是指向window的。
      • 可以使用对象冒充强制改变this的指向
      • 将this赋值给一个变量,闭包访问这个变量

    三、代码

     1 <!DOCTYPE html>
     2 <html lang="zh-cn">
     3 <head>
     4   <meta charset="utf-8">
     5   <title>课堂演示</title>
     6 </head>
     7 <body>
     8   <script>
     9   /*
    10       var name='The Window';
    11       var obj=new Object();
    12       obj.name='my obj';
    13       obj.get=function(){
    14           return this.name;
    15       }
    16 
    17       var obj={
    18       name:'my obj',
    19       get:function(){
    20           return this.name;
    21         }
    22       }
    23       alert(obj.get())  //返回 'my obj'
    24 
    25     var name='The Window';
    26     var obj={
    27       name:'my obj',
    28       get:function(){
    29           return function(){
    30             return this.name;
    31           }
    32         }
    33       }
    34 
    35       alert(obj.get()()) //这次返回的是全局变量 'The Window'
    36       alert(obj.get().call(obj))//这次又返回的是'my obj',因为call()强制改变了this的指向
    37   */
    38   var name='The Window';
    39     var obj={
    40       name:'my obj',
    41       get:function(){
    42         //这里的this指的是对象,这里为obj
    43         var self=this
    44           return function(){
    45             //闭包里的this指的是window
    46             return self.name;
    47           }
    48         }
    49       }
    50 
    51       alert(obj.get()()) 
    52  
    53 
    54   </script>
    55 </body>
    56 </html>
  • 相关阅读:
    vue--组件基础
    vue中的一些知识点--多看文档
    关于组件--React
    数组方法-->map()
    正则表达式使用
    border-image 和 border-color 不能同时使用问题
    gulp
    oninput 中文输入
    linux文档权限
    为什么使用 use strict
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9026943.html
Copyright © 2020-2023  润新知