关于this

最新推荐文章于 2024-07-26 18:35:26 发布

sxc_

最新推荐文章于 2024-07-26 18:35:26 发布

阅读量153

点赞数

分类专栏：你不知道的javascript笔记文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/sxc__/article/details/130309054

版权

你不知道的javascript笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一.为什么要使用this?

当你有这样一个函数,这个函数需要使用当前的上下文对象,如果不使用this的话，那么就要定义一个参数,让调用它的地方显式的传入一个上下文对象,使用this省略了这一过程。(注:谁调用this就是谁,在非严格模式下的全局作用域this指向window)

在一个dom元素的事件中this指向它本身。例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/绝对定位.css" />
  </head>
  <body>
    <button>121</button>
  </body>
  <script>
    let btn = document.querySelector("button");
    btn.onclick = function () {
      console.dir(this);
    };
  </script>
</html>

此时打印出来的为元素本事,使用console.dir打印出来好观察它的属性,不了解的可看我前面的console方法详解。

new创建的构造函数this绑定为那个变量

    function people(name) {
      this.name = name;
      function say() {
        console.log(this.name);
      }
      return {
        ...this,
        say,
      };
    }
    let nike = new people("nike");
    console.log(nike);
    nike.say();

4.当使用call apply这样的方法时this指定为它们传递的第一个参数。

    let nike = {
      name: "nike",
    };
    let mike = {
      name: "mike",
    };
    function say() {
      console.log(this.name);
    }
    say.call(nike); //nike

二.this能否用于递归？

this这个单词在因为里的意思“这是”，然而在JavaScript中并不是这样,不然的话当对一个树形数据进行递归处理的时候你就可以这样写。

var data = [
    {
        id:'123',
        children:[
            {id:'456'}
        ]
    }
]
function recursionData(arr){
    for(let i = 0;i<arr.length;i++){
        if(arr[i].children && arr[i].children.length>0){
            this(arr[i].children)
        }
        arr[i].name = arr[i].id+'name'    
    }   
}
recursionData(data)

很显然这肯定会报错,报错信息会是this is not a function,这涉及到默认绑定的问题,这里暂不扩展,下片文章会介绍。正确的办法是使用正常调用函数的方式,也可以使用arguments.callee调用本身(废用了,mdn都删了，它的兄弟function.prototype.caller也快被删了)。所以匿名函数(没有名称的函数叫匿名函数)在不使用上面那个危险的方法嵌套下没有办法调用本身。

三.函数的this指向

函数的this执行并不指向于函数本身,在全局作用域里面函数的this并不指向于它本身,而是window(下一篇详解),假设你想去通过给这个函数上面定义一个变量来记录这个函数执行了几次，每次调用执行this.变量名++，这是不行的并且window对象上面出来了这个变量名,涉及到this的默认绑定(下一篇详解)

sxc_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于this

函数的this执行并不指向于函数本身,在全局作用域里面函数的this并不指向于它本身,而是window(下一篇详解),假设你想去通过给这个函数上面定义一个变量来记录这个函数执行了几次，每次调用执行this.变量名++，这是不行的并且window对象上面出来了这个变量名,涉及到this的默认绑定(下一篇详解)此时打印出来的为元素本事,使用console.dir打印出来好观察它的属性,不了解的可看我前面的。所以匿名函数(没有名称的函数叫匿名函数)在不使用上面那个危险的方法嵌套下没有办法调用本身。
复制链接

扫一扫