JS高级学习笔记（上）

文章目录

JS高级学习笔记（上）
- this指向
- - 默认绑定：
  - 隐式绑定：
  - new绑定：
  - 显示绑定：
  - 规则优先级
- 箭头函数（arrow function）：
- 作用域和作用域链（Scope Chain）
- 关于Map和Array.prototype.map()
- 闭包
- arguments对象（类数组对象）
- - Argument转Array
  - 函数的剩余（rest）参数
- 纯函数
- 柯里化（curring）
- 对象和函数的原型
- - 对象的原型
  - 函数的原型(prototype)
  - 重写原型对象
- 面向对象的特性 -- 继承(ES5)
- - 通过原型链实现方法的继承(ES5)
  - 借用构造函数实现属性的继承(ES5)
  - 寄生式继承函数（ES5）
  - 构造函数的类方法

this指向

函数在调用时，JavaScript会默认给this绑定一个值；
this的绑定和定义的位置（编写的位置）没有关系；
3.this的绑定和调用方式以及调用的位置有关系；
4.this是在运行时被绑定的；

默认绑定：

隐式绑定：

在调用位置中，是通过某个对象发起函数的调用

new绑定：

JavaScript中的函数可以当做一个类的构造函数来使用，也就是使用new关键字.

补充：

显示绑定：

注意：JavaScript所有的函数都可以使用call和apply方法：

第一个传入参数都是相同的，要求传入一个对象，通过直接绑定了this的指向对象，称作显示绑定

如果我们希望一个函数总是显示的绑定到一个对象上，可以使用bind方法。bind() 方法创建一个新的绑定函数。在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用

规则优先级

new绑定>bind绑定（new绑定和call、apply是不允许同时使用的，所以不存在谁的优先级更高；new绑定可以和bind一起使用，new绑定优先级更高）
new绑定>隐式绑定
显示绑定>隐式绑定
默认规则的优先级最低

箭头函数（arrow function）：

箭头函数是ES6之后增加的一种编写函数的方法，并且它比函数表达式更要简洁

箭头函数不会绑定this、arguments属性；（this引用就会从上层作用域中找到对应的this）

箭头函数不能作为构造函数来使用（不能和new一起来使用，会抛出错误。箭头函数中没有原型）；

注意：如果函数执行体只有返回一个对象, 那么需要给这个对象加上()

作用域和作用域链（Scope Chain）

作用域链是一个对象列表，用于变量标识符的求值；
当进入一个执行上下文时，这个作用域链被创建，并且根据代码类型，添加一系列的对象；

关于Map和Array.prototype.map()

关于Map

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者[基本类型）都可以作为一个键或一个值。Object 和 Map 类似的是，它们都允许你按键存取一个值、删除键、检测一个键是否绑定了值。

Array.prototype.map()中的的map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

闭包

一个普通的函数function，如果它可以访问外层作用域的自由变量，那么这个函数和周围环境就是一个闭包；
从广义的角度来说：JavaScript中的函数都是闭包；
从狭义的角度来说：JavaScript中一个函数，如果访问了外层作用域的变量，那么它是一个闭包；

arguments对象（类数组对象）

事实上在函数有一个特别的对象：arguments对象

默认情况下，arguments对象是所有（非箭头）函数中都可用的局部变量；
该对象中存放着所有的调用者传入的参数，从0位置开始，依次存放；
arguments变量的类型是一个object类型（ array-like ），不是一个数组，但是和数组的用法看起来很相似；
如果调用者传入的参数多余函数接收的参数，可以通过arguments去获取所有的参数

Argument转Array

方式一：遍历arguments，添加到一个新数组中

方式二：ES6中常用的两个方法：

注意：箭头函数是不绑定arguments的，所以我们在箭头函数中使用arguments会去上层作用域查找

函数的剩余（rest）参数

如果最后一个参数是 … 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组；

那么剩余参数和arguments有什么区别呢？

剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参；
arguments对象不是一个真正的数组，而rest参数是一个真正的数组，可以进行数组的所有操作；
arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构，而rest参数是ES6中提供并且希望以此来替代arguments的；

纯函数

在程序设计中，若一个函数符合以下条件，那么这个函数被称为纯函数(维基百科)：

此函数在相同的输入值时，需产生相同的输出。
函数的输出和输入值以外的其他隐藏信息或状态无关，也和由I/O设备产生的外部输出无关。
该函数不能有语义上可观察的函数副作用，诸如“触发事件”，使输出设备输出，或更改输出值以外物件的内容等。

总结：

①确定的输入，一定会产生确定的输出；

②函数在执行过程中，不能产生副作用；

例子（slice和splice）：

slice截取数组时不会对原数组进行任何操作,而是生成一个新的数组；

splice截取数组, 会返回一个新的数组, 也会对原数组进行修改；

slice就是一个纯函数，不会修改数组本身，而splice函数不是一个纯函数；

副作用：表示在执行一个函数时，除了返回函数值之外，还对调用函数产生了附加的影响，比如修改了全局变量，修改参数或者改变外部的存储；

柯里化（curring）

只传递给函数一部分参数来调用它，让它返回一个函数去处理剩余的参数，这个过程就称之为柯里化；

对象和函数的原型

对象的原型

JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]]，这个特殊的对象可以指向另外一个对象。获取方式有两张：

通过对象的 proto 属性可以获取到（但是这个是早期浏览器自己添加的，存在一定的兼容性问题）；
通过 Object.getPrototypeOf 方法可以获取到；

疑问：这个原型有什么用呢？

当我们通过[get]方式获取一个属性对应的value时–>它会优先在自己的对象中查找，如果找到直接返回–>如果没有找到，那么会在原型对象中找。

函数的原型(prototype)

注意：所有的函数都有一个prototype的属性（不是__proto__)。因为它是一个函数，所有拥有了prototype属性，obj就没有这个属性。

作用：在通过new操作创建对象时，将这个显示原型赋值给创建出来对象的隐式原型。可以避免重复创建函数，造成空间浪费。

重写原型对象

每创建一个函数, 就会同时创建它的prototype对象, 这个对象也会自动获取constructor属性；

如果我们重写整个原型对象，相当于给prototype重新赋值了一个对象, 那么这个新对象的constructor属性, 会指向Object构造函数, 而不是原本的构造函数。

面向对象的特性 – 继承(ES5)

面向对象有三大特性：封装、继承、多态  封装：

我们前面将属性和方法封装到一个类中，可以称之为封装的过程；

继承：继承是面向对象中非常重要的，不仅仅可以减少重复代码的数量，也是多态前提（纯面向对象中）。继承可以帮助我们将重复的代码和逻辑抽取到父类中，子类只需要直接继承过来即可

多态：不同的对象在执行时表现出不同的形态；

通过原型链实现方法的继承(ES5)

借用构造函数实现属性的继承(ES5)

在子类型构造函数的内部调用父类型构造函数：

因为函数可以在任意的时刻被调用；
因此通过apply()和call()方法也可以在新创建的对象上执行构造函数

寄生式继承函数（ES5）

核心：创建一个对象，使子类显示原型指向这个对象，并且对象的隐式原型指向父类的显示原型

构造函数的类方法

类方法：指直接添加在构造函数的对象本身的方法

实例方法：是指添加在构造函数的对象原型上的方法

2022.07.07

深入学习JavaScript相关推荐

每个程序员都需要学习 JavaScript 的7个理由
最近在和招聘经理交流现在找一个好的程序员有多难的时候,我渐渐意识到了现在编程语言越来越倾重于JavaScript.Web开发人员尤其如此.所以,如果你是一个程序员,那么你应该去学习JavaScript ...
学习JavaScript数据结构与算法（一）：栈与队列
本系列的第一篇文章: 学习JavaScript数据结构与算法(一),栈与队列第二篇文章:学习JavaScript数据结构与算法(二):链表第三篇文章:学习JavaScript数据结构与算法(三): ...
更快学习 JavaScript 的 6 个思维技巧
2019独角兽企业重金招聘Python工程师标准>>> 我们在学习JavaScript,或其他任何编码技能的时候,往往是因为这些拦路虎而裹足不前: 有些概念可能会造成混淆,尤其当你是 ...
[译]通过使用Chrome的开发者工具来学习JavaScript
原文:https://gist.github.com/4158604 本文作者是Peter Rybin,Chrome开发者工具团队成员. 本文中,我们将通过使用Chrome的开发者工具,来学习Java ...
学习javascript 的一点感想
原文:学习javascript 的一点感想 //动态性是指,在一个Javascript对象中,要为一个属性赋值,我们不必事先创建一个字段,只需要在使用的时候做赋值操作即可,如下例: var obj=n ...
学习javascript数据结构(三)——集合
前言总括: 本文讲解了数据结构中的[集合]概念,并使用javascript实现了集合. 原文博客地址:学习javascript数据结构(三)--集合知乎专栏&&简书专题:前端进击者 ...
[译] 学习 JavaScript：9 个常见错误阻碍你进步
本文讲的是[译] 学习 JavaScript:9 个常见错误阻碍你进步, 原文地址:Learning JavaScript: 9 Common Mistakes That Are Holding Yo ...
“5W1H”带你来学习JavaScript
上次的设计模式讲课,从中学习到了非常多.不仅是技术上,更重要的是怎样来学习.我们学习的技术.科技的更新速度超过我们的想象,对于我们这个有生命年限的个体,怎样可以在有生之年可以让自己立足于科技的不败浪潮 ...
使用Firebug或chrome-devToolBar深入学习javascript语言核心
使用Firebug和chrome-devToolBar调试页面样式或脚本是前端开发每天必做之事.这个开发神器到底能给我们带来哪些更神奇的帮助呢?这几天看的一些资料中给了我启发,能不通过Firebug和 ...
如何循序渐进有效学习 JavaScript？
张克军 , 豆瓣前端工程师 185 票,来自 haochuan . Yin .知乎用户更多我的建议: 1. 选本好书 http:// book.douban.com/subject /2994 ...

深入学习JavaScript