会飞的鱼

2020
Godam
首页 » 读书笔记 » Day 04 JS中this及变量作用域

Day 04 JS中this及变量作用域

前言

    这篇笔记写的是关于JS中的this以及其变量作用域的一些要点,搜集了一些菜鸟教程上没有提到的技巧和方法,所以写一下笔记吧。

正文

JavaScript this

    this是许多编程语言中常用的一个对象,他返回当前对象的引用,但具体是什么呢?


  • 在方法中,this 表示该方法所属的对象。
  • 如果单独使用,this 表示全局对象。
  • 在函数中,this 表示全局对象。
  • 在函数中,在严格模式下,this 是未定义的(undefined)。
  • 在事件中,this 表示接收事件的元素。
  • 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

    这里,对于前面几项内容基本可以理解和其他编程语言相同,即在this所处的代码块中,this返回当前所处理的对象。我们要讨论的是最后一条,即call()和apply()的用法与特性。

call() apply()

    在 JavaScript 中函数也是对象,对象则有方法,apply 和 call 就是函数对象的方法。这两个方法异常强大,他们允许切换函数执行的上下文环境(context),即 this 绑定的对象。

    来看一下他们的基本语法:

Function.call(obj[, param1[, param2[, [,...paramN]]]]);
Function.apply(obj[, argArray]);
    对于apply中的参数argArray可以是数组,它将作为参数传给Function
    下面我们来看一段代码,当我们使用 person2 作为参数来调用person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法:
var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // 返回 "John Doe"
    我们再来看一段call示例:


function People(name, age) {
    this.name = name;
    this.age = age;
}

function Student(name, age, grade) {
    People.call(this, name, age);
    this.grade = grade;
}

var student = new Student('小明', 21, '大三');
console.log(student.name + student.age + student.grade);//小明21大三
    在这个例子中,我们并没有给Student的name和age赋值,但是存在这两个属性的值,这还是要归功于call()方法,它可以改变this的指向。
    在这个例子里,People.call(this, name, age);中的this代表的是Student,这也就是之前说的,使得Student可以调用People中的方法,因为People中有this.name = name;等语句,这样就将name和age属性创建到了Student中。
    至于apply()方法作用也和call()方法一样,我们可以这么写:


People.apply(this, [name, age]);
或者
People.apply(this, arguments);
    下面为大家介绍一下apply的特殊用法:


    apply可以将一个数组默认的转换为一个参数列表([param1,param2,param3]转换为param1,param2,param3),借助apply的这点特性,所以就有了以下高效率的方法:

var array = [1, 2, 3];
var max = Math.max.apply(null, array);
console.log(max);//3
    这样轻易的可以得到一个数组中最大的一项,apply会将一个数组装换为一个参数接一个参数的传递给方法,这块在调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,我们只需要用这个方法帮我运算,得到返回的结果就行,所以直接传递了一个null过去,当然,第一个参数使用this也是可以的。


    我们还可以利用它将两个数组合并:

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1);//[ 1, 2, 3, 4, 5, 6 ]
     这样使用是不是很巧妙呢?


let and const

    变量作用域问题?感觉菜鸟教程说的好复杂,感觉通俗理解起来一个花括号{}包起来的是一段代码块,这段代码块有着自己独立的小天地,可以申请属于自己的变量。

    最后,菜鸟笔记下的总结简单明了,这里就直接引用了:

  • 使用var关键字声明的全局作用域变量属于window对象。
  • 使用let关键字声明的全局作用域变量不属于window对象。
  • 使用var关键字声明的变量在任何地方都可以修改。
  • 在相同的作用域或块级作用域中,不能使用let关键字来重置var关键字声明的变量。
  • 在相同的作用域或块级作用域中,不能使用let关键字来重置let关键字声明的变量。
  • let关键字在不同作用域,或不用块级作用域中是可以重新声明赋值的。
  • 在相同的作用域或块级作用域中,不能使用const关键字来重置var和let关键字声明的变量。
  • 在相同的作用域或块级作用域中,不能使用const关键字来重置const关键字声明的变量
  • const 关键字在不同作用域,或不同块级作用域中是可以重新声明赋值的:
  • var关键字定义的变量可以先使用后声明。
  • let关键字定义的变量需要先声明再使用。
  • const关键字定义的常量,声明时必须进行初始化,且初始化后不可再修改。


文章如无特别注明均为原创! 作者: 果果, 转载或复制请以 超链接形式 并注明出处 GODAM|博客|godam
原文地址《 Day 04 JS中this及变量作用域》发布于2020-3-3

分享到:
打赏

评论

游客

  1. #2
    qq_avatar

    可以发啊。。

    果果 1年前 (2020-03-03)回复
  2. #1
    qq_avatar

    果果 1年前 (2020-03-03)回复
切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

sitemap