JS高级03-this指向的三种情况,函数调用的上下文模式(动态修改函数中this的指向),上下文经典场景,闭包的解释

最新推荐文章于 2022-04-10 23:07:42 发布
最新推荐文章于 2022-04-10 23:07:42 发布
阅读量455 收藏
点赞数
文章标签： javascript 前端 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40630195/article/details/122352321
版权

今日学习任务

  • 1.函数的四种调用方式
    • 重点掌握this指向的三种情况
    • a.普通函数
    • b.对象方法
    • c.构造函数
    • d.上下文模式
  • 2.函数调用的上下文模式
    • a.call()
    • b.apply()
    • c.bind()
    • 上下文模式经典场景

01-函数的三种调用方式(this指向)

1.复习函数三种调用方式：普通函数 对象方法 构造函数

  • 重点：理解this关键字作用：谁调用这个函数，this指向谁
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        函数三种执行模式 ： 全局函数 、 对象方法 、 构造函数
            this : 谁 `调用` 我，我就指向谁
            1. 全局函数 ： this指向window
            2. 对象方法 ： this指向对象
            3. 构造函数 ： this指向new创建的空对象
         */

         
        //1.全局函数
        function fn(){
            console.log('111111');
            console.log(this);
            
            
        };

        fn();//window.fn()


        //2.对象的方法
        let obj = {
            name:'班长',
            sayHi:function(){
                console.log('我是胖胖又可爱的得小又又');
                console.log(this);
                
            }
        };

        obj.sayHi();
        //将fn的地址赋值给sayHi
        obj.sayHi = fn;
        //此时this指向obj，this指向跟声明没有关系。取决于函数是如何调用的
        obj.sayHi();

        //3.构造函数
        function Person(name,age){
            //(1)创建一个空对象  (2)this指向这个对象 (3)执行赋值代码 (4)返回这个对象

            //this :指向new创建的哪个对象
            console.log(this);
            
            this.name = name;
            this.age = age;
        };

        let p1 = new Person();//构造函数

        //没有加new，以全局函数方式执行。此时this就是window，函数里面其实是给window添加属性（全局变量）
        Person('张三',18);//全局函数

        console.log(name);
        console.log(age);
        
    </script>
</body>
</html>

02-函数调用的上下文模式

了解上下文模式注意点

  • a.函数上下文三个方法：call() apply() bind(),它们定义在Function构造函数的原型中
  • b.如果将this指向修改为值类型:(number,boolean,string)，则函数会自动帮我们包装成对应的引用类型（基本包装类型)
    • 值类型： '123',1,true
    • 基本包装类型:String('123'),Number(1),Boolean(true)

1.1-函数执行的上下文模式

作用：可以动态修改函数中的this指向

  • call() apply() bind()

    异同点

    • 相同之处：都可以修改函数中this指向
    • 不同点：传参方式不同
      • call()语法： 函数名.call(this修改后的指向，arg1,arg2…………)
      • apply()语法：函数名.apply(this修改之后的指向,伪数组或者数组)
        • bind()语法：函数名.bind(this修改后的指向,arg1,arg2....)
        • bind()语法并不会立即执行函数，而是返回一个修改指向后的新函数,常用于回调函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        1.函数三种执行方式 ： 
            全局函数 ： this指向window
            对象方法：  this指向对象
            构造函数 ： this指向new创建的对象
                共同的特点： this的指向无法动态修改

        2.函数上下文模式 ： 
            2.1 作用： 可以动态修改函数中的this
            2.2 语法： 有3种写法，作用都是一样改this，应用场景不同
                a. 函数名.call(修改的this,arg1,arg2…………) 
                    * 适用于函数原本形参 <= 1
                b. 函数名.apply(修改的this,[数组或伪数组])
                    * 适用于函数原本形参 >= 2
                c. 函数名.bind(修改的this,arg1,arg2…………)
                    * 特点：不会立即执行这个函数，而是返回修改this后的新函数
                    * 适用于不会立即执行的函数 : 事件处理函数，定时器函数

         */

        // function fn(){
        //     //三种执行模式this无法动态修改
        //     //this = {age:18};

        //     console.log(this);
            
        // };

        // fn();//this:window
        
        /* 上下文模式 */
        function fn(a,b){
            console.log(this);
            console.log(a+b);
        };

        //a. 函数名.call(修改的this,arg1,arg2…………) 
        //应用场景： 适用于函数原本形参 <= 1
        fn(10,20);//this:window
        fn.call({age:18},100,200);
        
        //b. 函数名.apply(修改的this,[数组或伪数组])
        //应用场景： 适用于函数原本形参 >=2
        fn.apply({age:88},[20,30]);

        //c. 函数名.bind(修改的this,arg1,arg2…………)
        //特点：这个函数不会立即执行，而是返回一个修改this之后的新函数
        //应用场景 ： 事件处理函数，定时器
        let newFn =  fn.bind({name:'坤坤'});
        newFn(50,60);


        //4. 定时器中的this一定是指向window

        // 定时器：一段代码间隔事件执行 setTimeout(一段代码，间隔时间)

        //4.1 具名函数
        let test = function(){
            console.log('我是具名函数');
            console.log(this);    
        };

        let newTest = test.bind({name:'张三'})

        setTimeout(newTest,3000);

        //4.2 匿名函数
        setTimeout(function(){
            console.log('我是定时器中的函数');
            console.log(this);
        }.bind({name:'李四'}),2000);
    </script>
</body>
</html>


    //2.3 bind();
    //语法:  函数名.bind(this修改后的指向,arg1,arg2....);
    let obj = {
        name:"文聪兄"
    };

    function getSum(a,b){
        console.log(this);
        console.log(a+b);
    }

    getSum(10,20);//this指向window
    let fn = getSum.bind(obj); //bind()不会执行这个函数,而是会返回一个修改了this的函数.
    fn(100,200); //此时这个fn,就相当于是修改了this之后的getSum.


    //3 回调函数（例如定时器），一般使用bind来修改this指向
       let obj = {
         name:"班长"
       };
        //3.1  定时器的回调函数是一个具名函数
       function test1(){
         console.log(this);
       }
       let test2 = test1.bind(obj);
       setInterval(test2,2000);
       //3.2 定时器的回调函数是一个匿名函数
       setInterval(function () {
           console.log ( this );
       }.bind(obj),2000);

1.2-函数调用上下文模式注意点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        1. 函数上下文执行模式 ： 动态修改this
            注意点 ： 修改的this只能是引用类型

        2.如果写的是基本数据类型 
            string，number，boolean ： 自定帮我们转成对应的引用类型(基本包装类型) new String() Boolean() Number()
            undefined,null :代码不会报错，也不会帮我们修改this，还是原来的this
         */

        function fn(){
            console.log(this);
            
        };

        fn.call('str');
        fn.call(1);
        fn.call(true);

        //如果传的是undefined和null，或者不传。代码不会报错，也不会帮我们修改this，还是原来的window
        fn.call(undefined);
        fn.call(null);
        fn.call();
        fn.call(window);
    </script>
</body>
</html>

1.3-案例01：伪数组转数组

本小节知识点：伪数组转数组

  • 1.伪数组：只有数组的三要素（元素、下标、长度），没有数组的api
  • 2.转数组目的：让伪数组也可以调用数组的api
  • 3.方式很多种，掌握任何一种即可
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
        伪数组 ： 拥有数组三要素，但是没有数组的api
            伪数组本质是一个对象
         */

        let weiArr = {
            0: '林绿裙',
            1: '保健坤',
            2: '泰拳邹',
            3: '炮王周',
            length: 4
        };
        console.log(weiArr);
        console.log(weiArr[0]);

        //需求：伪数组转成真数组 （希望伪数组也可以调用数组的api）

        //1.遍历伪数组添加到真数组中
        // let arr = [];
        // for (let i = 0; i < weiArr.length; i++) {
        //     console.log(weiArr[i]);
        //     arr.push(weiArr[i]);
        // };
        // console.log(arr);

        //2. ** arr.push.apply()
        /* 
        arr.push() : 支持多个参数
         */
        let arr = [];
        //这里使用apply不是为了修改this，而是利用applay传参会自动遍历数组/伪数组每一个元素作为实参传递
        arr.push.apply(arr, weiArr);
        console.log(arr);


        //3. ** slice
        /* 
       (1) 数组arr.slice() 作用是查询数组元素。 如果传0 或者 不传，则会自动返回数组本身
       (2) 如果 伪数组 可以调用slice(), 则会自动返回数组本身（真数组）
       (3) 但是 伪数组 不能调用slice(), 因为伪数组的原型 不是Array.prototype
       (4) 思考： 伪数组如何可以调用slice()?
       (5) 突破点：  slice() 方法在数组的原型中Array.prototype
           原型中的成员：两种对象可以访问
               * a.构造函数自身可以访问
               * b.每一个实例对象
       (6) 越过原型链查找机制，直接访问构造函数原型中的slice() : Array.prototype.slice()
       (7) 如果使用构造函数原型来调用slice(), 此时this是谁呢？ 变成原型： Array.prototype
       (8) 使用 Array.prototype.slice.call(weiArr)
        */

        //weiArr.slice();//报错 为什么报错？ weiArr的原型不是Array.prototype
        //slice方法存储在构造函数原型中，谁可以访问原型？
        //1.实例化对象
        //arr.sclie();
        //2.构造函数自身
        //Array.prototype.slice()

        //越过原型链，直接从构造函数原型中调用slice方法
        let arr = Array.prototype.slice.call(weiArr);
        console.log(arr);




        /* 手动模拟伪数组可以调用slice()原理 */

        //1.有一个构造函数Person  (相当于Array)
        function Person(name, age) {
            this.name = name;
            this.age = age;
        };

        //Person原型添加成员（相当于slice）
        Person.prototype.sayHi = function () {
            //this : 谁调用我就指向谁  (正常情况下：this指向调用这个方法person实例对象)
            console.log(this.name);
        };

        //2. p1 和 p2都是Person的实例对象， 所以可以访问 Person原型中的sayHi()方法
        let p1 = new Person('困困', 20);
        p1.sayHi();

        let p2 = new Person('琪琪', 30);
        p2.sayHi();

        //3. 有一个obj(属性名和p1一样，但是原型指向的不是Person,相当于伪数组)
        let obj = {
            name: '班长',
            age: 88
        };

        //4. obj不能直接调用sayHi，会报错
        // obj.sayHi();

        //5.   解决方案： 越过原型链，直接访问Person.prototype中的sayHi
        // 但是这样调用的话， sayHi中的this就变成了  Person.prototype
        // 所以需要使用call，把this修改成obj.  就相当于是obj在调用sayHi()
        Person.prototype.sayHi.call(obj);

    </script>
</body>

</html>

1.5-案例02：求数组最大值

本小节知识点

  • 通过apply方式，让数组对象可以调用Math对象的方法
    • 原因：apply方法传参的时候，会自动将数组的每一个元素取出来作为实参
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        let arr = [100,20,66,88,90];

        //1.擂台思想
        let max = -Infinity;
        for(let i = 0;i<arr.length;i++){
            if(arr[i] > max){
                max = arr[i]
            };
        };
        console.log(max);

        //2.Math.max(数字1，数字2，数字3,…………)
        // let max = Math.max(arr[0],arr[1],arr[2],arr[3],arr[4]);
        //这里没有必要修改this，借助apply可以自动遍历数组传参
        let max1 =  Math.max.apply(Math,arr);
        console.log(max1);
        
        
    </script>
</body>
</html>

1.6-案例03：万能检测数据类型

  • 思考题：为什么数组调用toString和对象调用toString得结果不一样
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        1. 检测数据类型 ： typeof 数据
            特点：两种数据类型无法检测 null与array
         */
        console.log(typeof null);//object
        console.log(typeof [10,20,30]);//object

        //3. 万能检测数据类型法 :
        // Object.prototype.toString.call(数据)
/* 
        检测数据类型需要使用Object原型（Object.prototype）中的toString()来检测
            返回一个固定值： [object 数据类型]
         */

        console.log( Object.prototype.toString.call('123'));//[object String]
        console.log( Object.prototype.toString.call(666));//[object Number]
        console.log( Object.prototype.toString.call(true));//[object Boolean]
        console.log( Object.prototype.toString.call(undefined));//[object Undefined]
        console.log( Object.prototype.toString.call(null));//[object Null]
        console.log( Object.prototype.toString.call([10,20,30]));//[object Array]
        console.log( Object.prototype.toString.call(function(){}));//[object Function]
        console.log( Object.prototype.toString.call({}));//[object Object]
        
        
        
        /* 
        请说出下列代码的结果，如果不是Null，如何得到Null
         */
        console.log( typeof null );
        
        
        
        
    </script>
</body>
</html>

03-递归

1.1-递归函数介绍

本小节知识点

  • 1.递归函数：一个函数自己调用自己
  • 2.递归函数特点
    • a.一定要有结束条件，否则会导致死循环
    • b.能用递归函数实现的需求，就一定可以用循环调用函数来解决，只是代码简洁与性能不同而已
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        1. 递归函数 ： 在函数中自己调用自己

        2. 递归特点
            a. 能用递归实现的功能一定可以用循环，只是语法不同
            b. 递归一定要有结束的条件，否则会导致死循环
         */

        //一个函数递归
        // function fn(){
        //     console.log('哈哈');
        //     fn();
            
        // };

        // fn();

        //两个函数递归
        // function fn1(){
        //     console.log('哈哈');
        //     fn2();
            
        // };

        // function fn2(){
        //     console.log('呵呵');
        //     fn1();
            
        // };
        // fn2();


        //需求：写一个函数，打印三次 班长爱坤哥

        let i = 1;
        function fn(){
            console.log('班长爱坤哥');
            i++;
            if(i <= 3){
                fn();
            };
            
            //循环实现
            // for(let i = 1;i<=3;i++){
            //     console.log('班长爱坤哥');
                
            // };
        };

        fn();
    </script>
</body>
</html>

1.2-递归应用场景：浅拷贝与深拷贝

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*浅拷贝与深拷贝概念主要针对于对象这种数据类型 
        
        1.浅拷贝： 拷贝的是地址
            * 特点：修改拷贝后的数据，原数据也会随之修改
        2.深拷贝：拷贝的是数据
            * 特点：修改拷贝后的数据，对原数据没有影响
         */

      let obj = {
        name: 'ikun',
        age: 32,
        hobby: ['讲课', '敲代码', '黑马程序员'],
        class: {
          name: '武汉大前端',
          salary: [18888, 12000, 10000]
        }
      }

      //1.浅拷贝： 拷贝的是地址
      let obj1 = obj
      obj1.name = '黑马李宗盛'
      console.log(obj, obj1)

      //2.深拷贝：拷贝的是数据
      //核心原理：使用递归。 只要遇到属性值是引用类型，则遍历。

      function kaobei (newObj, obj) {
        // 遍历
        for (let key in obj) {
          if (obj[key] instanceof Array) {
            // obj[key] 是数组
            // obj[key]是数组
            newObj[key] = []

            kaobei(newObj[key], obj[key])
          } else if (obj[key] instanceof Object) {
            // obj[key] 是对象
            // obj[key]再遍历拷贝
            newObj[key] = {}

            kaobei(newObj[key], obj[key])
          } else {
            newObj[key] = obj[key]
          }
        }
      }

      let obj2 = {}
      //深拷贝
      kaobei(obj2, obj)
      //修改拷贝后的数据
      obj2.name = '黑马颜值担当'
      obj2.hobby = '唱歌'
      console.log(obj,obj2)
    </script>
  </body>
</html>

1.3-递归应用场景：遍历dom树

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .menu p {
        width: 100px;
        border: 3px solid;
        margin: 5px;
      }

      .menu > div p {
        margin-left: 10px;
        border-color: red;
      }

      .menu > div > div p {
        margin-left: 20px;
        border-color: green;
      }

      .menu > div > div > div p {
        margin-left: 30px;
        border-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="menu">
      <!-- <div>
        <p>第一级菜单</p>
        <div>
          <p>第二级菜单</p>
          <div>
            <p>第三级菜单</p>
          </div>
        </div>
      </div> -->
    </div>
    <script>
      //服务器返回一个不确定的数据结构,涉及到多重数组嵌套
      let arr = [
        {
          type: '电子产品',
          data: [
            {
              type: '手机',
              data: ['iPhone手机', '小米手机', '华为手机']
            },
            {
              type: '平板',
              data: ['iPad', '平板小米', '平板华为']
            },
            {
              type: '智能手表',
              data: []
            }
          ]
        },
        {
          type: '生活家居',
          data: [
            {
              type: '沙发',
              data: ['真皮沙发', '布沙发']
            },
            {
              type: '椅子',
              data: ['餐椅', '电脑椅', '办公椅', '休闲椅']
            },
            {
              type: '桌子',
              data: ['办公桌']
            }
          ]
        },
        {
          type: '零食',
          data: [
            {
              type: '水果',
              data: []
            },
            {
              type: '咖啡',
              data: ['雀巢咖啡']
            }
          ]
        }
      ]

      /* 使用递归遍历数组 */
      function addElement (arr, father) {
        for (let i = 0; i < arr.length; i++) {
          let div = document.createElement('div')
          div.innerHTML = `<p>${arr[i].type || arr[i] }</p>`
          father.appendChild(div)
          if( arr[i].data ){
            addElement(arr[i].data,div)
          }
        }
      }

      //调用递归函数
      addElement(arr,document.querySelector('.menu'))
    </script>
  </body>
</html>

04-闭包（closure）

  • 传送门：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

在这里插入图片描述

学习目标：能够认识闭包结构，知道闭包在开发中的作用。

一. 闭包的定义

  • 1.闭包 ： 是一个可以访问其他函数作用域的函数
    • 闭包 = 函数 + 上下文的引用，闭包不等于函数。以下代码就构成了闭包：
function fn(){
    let a = 1
    function fn1() {
        console.log(a)
    }
    fn1()
}

提示：执行函数 fn1 用到了另一个函数fn中的 a 这个变量，所以 fn1 + a 构成了闭包。

二. 闭包的作用

直接作用：解决变量污染问题，让变量被函数保护起来。

示例代码如下：

let count = 0
setInterval(function () {
  console.log(count++)
}, 1000)

以上代码中的 count 是一个使用频率很高的变量名，为了避免和其他位置的代码冲突，可以再使用一个函数把以上代码包裹起来，起到保护作用。

function fn() {
  let count = 0

  setInterval(function () {
    console.log(count++)
  }, 1000)
}

以上代码中，setInterval 第一个参数的匿名函数与 count 构成了闭包。

将以上代码改写如下：

function fn() {
  let count = 0
  function add() {
    console.log(count++)
  }
  
  setInterval(add, 1000)
}

以上代码中，add + count 构成了闭包。

结论：一个函数内使用了外部的变量，那这个函数和被使用的外部变量一起被称为闭包结构，在实际开发中，通常会再使用一个函数包裹住闭包结构，以起到对变量保护的作用。

三. 闭包的案例

  1. 案例需求：在输入框输入搜索文字，点击百度一下按钮，用定时器模拟网络请求，1 秒之后显示搜索结果；

  2. 页面结构如下

    <div class="box">
  <input type="search" name="" id="">
  <button>百度一下</button>
</div>

  3. 代码如下：

    // 1. 获取元素
let search = document.querySelector('.box input')
let btn = document.querySelector('.box button')

// 2. 添加点击事件
btn.onclick = function () {
  // 获取搜索的文字
  let text = search.value

  // 模拟发送网络请求
  setTimeout(function () {
    alert(`您搜索的内容是 ${text} 共搜索到 12345 条结果`)
  }, 1000)
}

闭包小结

  1. 闭包 = 函数 + 上下文的引用
  2. 闭包的作用：解决变量污染问题，让变量被函数保护起来。
    • 在 ES5 时代，闭包可以解决一些其他 JavaScript 的小 BUG，但随着 ES6 let 等新语法的诞生，之前一些闭包的使用场景已经不再需要.

今天学习重点梳理(高频面试题)

this三种指向

this : 谁 调用 我，我就指向谁
1.全局函数 ： this指向window

2.对象方法 ： this指向对象

3.构造函数 ： this指向new创建的空对象

call、apply、bind区别

  • 相同点：都是修改函数this指向
  • 不同点
    • 传参方式不同： call用于单个参数，apply用于多个参数
    • 执行机制不同： call与apply会立即执行， bind不会立即执行
      • call、apply用一次修改一次
      • bind；一次修改，终生有效

闭包

  • 什么是闭包：以下两种回答都可以
    • 闭包是一个访问其他函数内部变量的函数
    • 闭包是 函数 + 上下文代码组合
  • 闭包作用：解决变量污染

递归

  • 什么是递归：函数内部调用自己
  • 递归场景
    • 深拷贝
    • 遍历dom树
码少女壮士
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
函数this三种指向
weixin_66375317的博客
06-23 501
函数this三种指向
JS嵌套函数调用上下文的问题解决
01-19
代码如下: <!... <head> <... function f(){ // 调用嵌套函数时this不是指向调用外层函数的上下文 console.log(this === stu); // ==> false; 如果想访问外部函数的this需要将外部函数的t
JS this指向的三种情况
weixin_40929263的博客
08-16 233
浏览器（解析器）在调用函数每次都会向函数内部传递一个隐含的参数 这个隐含参数就是 this ，this指向的是一个对象（object window） 这个对象称为函数执行的上下文的对象 this不是固定的，根据函数调用的方式不同，this指向不同对象 以函数形式调用 this永远指向window <script> function fun(a, b) { console.log(this); } fun(); </sc
js中this指向的三种情况
anbinmei9074的博客
03-08 196
js中this指向的几种情况一、全局作用域或者普通函数自执行中this指向全局对象window，普通函数的自执行会进行预编译，然后预编译this的指向是window //全局作用域 console.log(this);//Window //普通函数 function fn(){ console.log(this); //Window } fn();...
this的三种指向
m0_64352881的博客
04-09 338
<script> /* 1.this环境对象 ： 谁‘调用’我,我就指向谁 （相当于中文‘我’，谁说出这个字，这个字就代表谁） * 重点： 与函数声明无关，取决于函数调用 * (1)普通函数调用: 函数名() -> this指向window * (2)对象方法调用: 对象名.方法名() -> this指向对象 * (3)构造函..
JS中的this的几种指向情况
weixin_45232840的博客
05-24 395
一：普通函数、 function fn(){ console.log(this) } fn() //window 二：使用bind，apply，call function fn(){ console.log(this) } fn() //window //call fn.call({a:10}) //{a:10} //bind const fn2=fn.bind({b:20}) fn2() //{b
JS中this上下文对象使用方式
11-23
在五种不同的情况下 ，this 指向的各不相同。 有句话说得很在理 — 谁调用它，this就指向谁 一、全局范围内 在全局范围内使用this ，它将指向全局对象（浏览器中为 window） var name = 'name1'; console.log...
浅谈JS中this在各个场景下的指向
12-09
为了保证的可读性，本文采用意译而非直译。...在J要中情况就有所不同: this表示函数的当前执行上下文，JS 中函数调用主要有以下几种方式： 函数调用: alert('Hello World!') 方法调用: console.
js中this的绑定情况以及如何改变this的指向
01-08
如果嵌套函数作为函数调用，其this值不是全局对象就是undefined（非严格模式下是全局对象（即window对象），严格模式下是undefined）。很多人误以为调用嵌套函数时，this会指向调用外层函数的上下文。如果你想访问这...
【this的指向几种情况】
weixin_57036621的博客
04-10 432
文章目录前言一、this的指向1.作为对象的指向被调用：2.作为普通函数使用3.作为构造函数使用4.call ，applp 的调用5.箭头函数 前言 ` js中 this的几种使用场景 一、this的指向 1.作为对象的指向被调用： 1.1，this指向该对象 2.作为普通函数使用 2.1，this总指向全局对象（在浏览器一般是指window） 2.在严格的说：this指向und 3.作为构造函数使用 3.1，一般情况下，this指向的是被构造函数返回的实例 <script>
JavaScript的三种this指向问题
UniKylin
03-14 1603
上一节中的this没有怎么讲，其实也不是多难理解this可以理解为指向对象，同时也可以理解指针，关键是this这个指针在JavaScript这种函数中可以嵌套函数，可以模块化的语言中究竟this指向了谁呢?1.函数中的thisfunction fn(){ //其实alert(this)相当于window.alert(this);以后讲事件的时候可以知道为什么可以这样写？ alert(
this指向几种情况详解
qq_45305088的博客
07-09 498
1.对象的this（指向.前面） 基本的 var a = 0 var obj = { a:1, fn() { console.log(this.a，this,a); } } obj.fn()//1,obj ,0 2.直接调用的this（指向window，容易混淆：闭包） 有几种情况： 2.1 函数作为参数传给函数 var a = 1 function fn() { console.log(a); } function fn1(data) { var a =
改变this指向的三种方法
weixin_44852765的博客
05-27 394
https://www.cnblogs.com/theblogs/p/9943179.html
函数中 this 的几种具体情况
weixin_45912061的博客
02-26 538
我们函数中经常会使用到 this 来指示变量，但 this 在不同情况下也有不同的含义，下面具体展示： 1、以函数形式调用函数时：fun（），this永远是夫对象，例如 JavaScript 中为 window 2、以方法调用时，this 永远是调用方法的对象，eg：tom.fun（）中 this 就是 tom 3、以构造函数调用时， this 就是构造函数新创建的那个对象 4、使用 call（）or apply（）调用时，this 是指定的那个对象：fun.call（obj）中 this 就是obj .
this的四种情况
weixin_30700099的博客
08-03 190
1.当在函数调用的时候指向window; 2.当方法调用的时候指向调用对象； 3.当用apply和call上下文调用的时候指向传入的第一个参数； 4.。构造函数调用指向实例对象 总结：如果是用new方式创建对象，this指向新建的那个对象； 　　 如果只是普通的调用，谁调用这个函数，函数里的this就指向谁。 转载于:https://www.cnblogs.com...
javascript 动态改变onclick函数
weixin_33901641的博客
08-04 141
一View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head>&...
改变上下文
qq_42488433的博客
11-05 366
题目描述 将函数 fn 的执行上下文改为 obj，返回 fn 执行后的值 示例1 输入 复制 alterContext(function() {return this.greeting + ', ' + this.name + '!'; }, {name: 'Rebecca', greeting: 'Yo' }) 输出 复制 Yo, Rebecca!     知识点： 在...
Javascript（一）-17-(JS函数_动态函数)
wy_0928的博客
08-20 579
【JS动态函数】 使用的是JS中内置的一个对象Function（大写）。 参数列表，函数体都是通过字符串动态指定的。 【代码】 var add = new Function("x,y","var sum; sum=x+y; return sum;"); var sum = add(4,5); alert("sum="+sum); //
js动态修改属性
andilyliao的博客
10-21 117
String.prototype.replaceAll = function(s1,s2){ return this.replace(new RegExp(s1,"gm"),s2); } isieb=""; function IsIE(){ if (window.navigator.userAgent.indexOf("MSIE")>...
JS-箭头函数中的this的指向
最新发布
07-27
在箭头函数中，this的指向与普通函数有所不同。在箭头函数中，this的值由外层作用域决定，而不是由函数被调用的方式决定。这意味着箭头函数中的this指向的是定义时所在的对象，而不是调用时的对象。 具体来说，箭头函数不会创建自己的this值，而是会继承外层作用域中的this值。这种特性使得箭头函数在需要保持上下文一致性的场景中非常有用，尤其是在回调函数中使用。 下面是一个示例代码，展示了箭头函数中this的指向： ``` // 定义一个对象 const obj = { name: 'C知道', sayHello: function() { // 普通函数 setTimeout(function() { console.log('普通函数中的this:', this); // 指向全局对象（浏览器中为Window） }, 100); // 箭头函数 setTimeout(() => { console.log('箭头函数中的this:', this); // 指向obj对象 }, 100); } }; // 调用对象的方法 obj.sayHello(); ``` 在上面的代码中，普通函数中的this指向全局对象（浏览器中为Window），而箭头函数中的this指向obj对象。这是因为箭头函数继承了外层作用域中的this值，而普通函数则根据调用方式决定this的值。 希望这个解答能够帮到你！如果你还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值