https://www.yuque.com/ofrqk7/ms7fd0/ccnueo https://www.yuque.com/ofrqk7/ms7fd0/afadgd

JavaScript入门

JavaScript简介

JavaScript是世界上最流行的脚本语言，因为你在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑都是由JavaScript驱动的。 简单地说，JavaScript是一种运行在浏览器中的解释型的、弱类型的编程语言。 那么问题来了，为什么我们要学JavaScript？尤其是当你已经掌握了某些其他编程语言如Java、C++的情况下。 简单粗暴的回答就是：因为你没有选择。在Web世界里，只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互。

JavaScript的基本特点

  1. 是一种解释性脚本语言（代码不进行预编译）。
  2. 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
  3. 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
  4. 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
  5. JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。JavaScript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
  6. 可以实现web页面的人机交互。

语法

声明变量

JS变量是松散型的，可以用来保存保存任何类型的数据

  1. var one
  2. var One    //这里的定义是区分大小写的
  3. var x=2
  4. var person='Json'
  5. var message="Hello World"

打印变量

  1. console.log(x)
  2. console.log(person)
  3. console.log(messang)

数据类型

基本类型

  • 数值（Number）
  • 布尔类型（Boolean）
  • 字符型（String）
  • 未定义（Undefined）
  • 空值（Null）
  • Symbol（ES6新引入的一种新的原始数据类型，表示独一无二的值）

    ① Number

    整数和浮点数

  1. var intNum1 = 1
  2. var floatNum2 = 11.1
  3. var floatNum3 = 0.1
  4. var floatNum4 = .1  //不推荐
  7. console.log(intNum1)
  8. console.log(floatNum2)
  9. console.log(floatNum3)
  10. console.log(floatNum4)

NAN：一个特殊的值，表示not a number，用来表示一个本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误了)

  1. var x = NaN/10
  2. console.log(x)

②Boolean

ture和false，注意大小写

  1. var test = 'Hello World'
  2. Boolean(test)
  4. var a = undefined
  5. Boolean(a)
  7. var b = 0
  8. Boolean(b)

③String

  1. var  str1 = 'hello'
  2. var  str2 = "world"  //单引号'',双引号""和反引号``都行
  4. //模板字符串
  5. var str = `我是${str1}`
  7. console.log(str)

字符串操作：
indexOf()：查找字符串，用来定位第一次出现指定值的索引

  1. var str = 'Today is a happy day'
  2. str.indexOf('is')
  3. str.indexOf('it')

replace()：替换字符

  1. var str = 'Today is a happy day'
  2. var a = str.replace("happy","sad")
  3. console.log(a)

concat():连接两个字符串

  1. var str1 = 'Hello'
  2. var str2 = 'World'
  3. var str3 = str1.concat(str2)

includes():查找是否包含某个子字符串

  1. var str = 'Today is a happy day'
  2. str.includes('happy')

④Undefined

表示没有初始化的变量

  1. var test
  2. console.log(test == undefined)

⑤Null

表空值，一个完全空的对象

  1. Object.prototype.__proto__//原型链的尽头

引用类型

  • 对象(Object)
  • 数组(Array)
  • 函数(Function)

    ①Object

    ```javascript //创建方法有两种 var obj = new Object() obj.name = “Jack” obj.age = 80

var obj = { name : ‘Jack’, age : 80 }

//取出对象的方法也有两种 console.log(obj.name) console.log(obj[‘age’])

  1. <a name="cY4bm"></a>
  2. ### ②Array
  3. > 数组是数据的有向序列。但是数组的每一项都可以保存任何类型的数据。数组的大小是可以动态调整的,即可以随着数据的添加自动增长以容纳新增数据。在读取和设置数组的值时,要使用方括号并提供相应值的基于 0 的数字索引
  5. ```javascript
  6. var arr = [1,'1',true,[0,1,2,3]]
  7. arr[0]  //1
  8. arr[1]  //'1'
  9. arr[2]  //true
  10. arr[3]  //[0,1,2,3]
  11. arr.length //4，获取数组的长度

判断数组，数组的遍历

  1. //判断数组使用isArray函数
  2. var arr = [1,'1',true,[0,1,2,3]]
  3. Array.isArray(arr)
  5. //数组的遍历
  6. //for循环
  7. for(var i = 0;i<=arr.length;i++)
  8. {
  9.   console.log(arr[i])
  10. }
  12. //forof遍历
  13. for(var item of arr)
  14. {
  15.   console.log(arr[item])
  16. }
  18. //foreach遍历
  19. arr.forEach((item,index)=>{
  20.   console.log(item)
  21. })

push()和unshift():

  1. var arr = ['Jack','Lucy','Mark']
  2. arr.push('Sam')  //在最后插入
  3. arr.unshift('Sam')  //在最前面插入

迭代的方法：

  • every:对数组中的每一项运行给定函数,如果该函数对每一项都返回 true ,则返回 true
  • filter() :对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组。
  • forEach() :对数组中的每一项运行给定函数。这个方法没有返回值。
  • map() :对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
  • some() :对数组中的每一项运行给定函数,如果该函数对任一项返回 true ,则返回 true 。 ```javascript var arr1 = [1,2,3,4,5] var arr2 = [2,4,6,8]

function test(item , index , arr){ return (item%2) == 0 }

arr1.every(test) arr2.every(test) arr1.some(test)

arr1.filter(test)

  1. <a name="LwG2j"></a>
  2. ### ③Function
  3. ```javascript
  4. //函数声明语法
  5. function test(){
  7. }
  9. //函数表达式的形式
  10. var test = function(){
  12. }
  14. //函数返回值
  15. function test(){
  16.     return 1;
  17. }

数据类型的判断

  1. var x = 1
  2. var isTrue = false
  3. var str = '今天也是****的一天呢'
  4. var un
  6. typeof x  //number
  7. typeof isTrue  //boolean
  8. typeof str  //string
  9. typeof un  //undefined

数据类型的转换

  1. 5 + null    // 返回 5         null 转换为 0
  2. "5" + null  // 返回"5null"   null 转换为 "null"
  3. "5" + 1     // 返回 "51"      1 转换为 "1" 
  4. "5" - 1     // 返回 4         "5" 转换为 5

基础语法

操作符

  1. //算数运算符
  2. //+ - * / ++ --
  3. var x=1
  4. //递增
  5. x++
  6. ++x
  7. //递减同上
  9. //赋值运算符
  10. x += 1  //相当于x=x+1
  12. //比较运算符
  13. //== === != !== > < >= <=
  15. //逻辑运算符
  16. //&& || !
  18. //条件运算符
  19. //?:

==和===的区别

==表示等于，===表示绝对等于，即类型和值均相等

&&和||的使用

  1. //特殊用法
  2. //当||左边为false时，才会执行右边的代码
  3. var test = 1
  4. test === 2  || console.log('||')
  6. //当&&左边为true时，才会执行右边的代码
  7. test ===1 && console.log("&&")

条件语句

  1. //if
  2. if(){
  4. }else if(){
  6. }else{
  8. }
  10. //switch
  11. switch(n)
  12. {
  13.     case 1:
  14.         执行代码块 1
  15.         break;
  16.     case 2:
  17.         执行代码块 2
  18.         break;
  19.     default:
  20.         与 case 1 和 case 2 不同时执行的代码
  21. }

循环语句

  1. //for
  2. for(var i=0;i<10;i++){
  3.   console.log(i)
  4. }
  6. //while
  7. while(i<10){
  8.   i++
  9. }
  11. //do-while
  12. do{
  13.   console.log(i)
  14.   i++
  15. }while(i<10)

变量，作用域和内存问题

栈内存和堆内存

JavaScript 基础 - 图1

栈内存：存放的是局部变量和全局变量（基本数据类型 Number,String,Boolean,Undefined,Null）。 堆内存：存放的是数组和对象（引用数据类型 Object）

复制变量

基本类型的复制需要开辟一个新值，直接将变量赋值给它

JavaScript 基础 - 图2

引用类型的复制其实是复制地址，共用一个地址里面的变量

JavaScript 基础 - 图3

  1. let a=12;
  2. let b=a;
  3. b=13;
  4. console.log(a)
  7. let n={
  8.     name:'teal'
  9. };
  10. let m=n;
  11. m.name='red';
  12. console.log(n.name);

作用域

在某个空间范围内，可以对数据进行读写操作

全局作用域

  1. //
  2. var t=123
  3. console.log(t)
  5. //隐式全局作用域
  6. function a(){
  7.   ty = 321
  8. }
  9. a()
  10. console.log(ty)

函数作用域

  1. //函数作用域
  2. //
  3. function lut(){
  4.   var z = 100
  5. }
  6. lut()
  7. console.log(z)  //z is not defined
  9. //
  10. function bar(){
  11.   var m = 50
  12.   function foo(){
  13.     console.log(m)  //50
  14.   }
  15.   foo()
  16. }

块级作用域

  1. for(var i=0;i<5;i++){
  2.     console.log(i)
  3. }//i污染到了全局
  4. var foo = true;
  5. if(foo){
  6.     var bar = foo*2;//污染到全局
  7.      console.log(bar)
  8. }
  9. console.log(bar)
  10. //块作用域本不应该污染全局
  11. //在Es6中会使用到let和const来定义变量

作用域链

一般情况下，变量取值到 创建 这个变量 的函数的作用域中取值。 但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成链条就叫做作用域链。

image.png
image.png

变量提升

  1. //　变量提升
  2. //变量和函数在内的所有声明都会在任何代码被执行前首先被处理(只有声明会被提升，而赋值被停留在原地)
  3. /*
  4. *  所以这个过程可以看成
  5. * var a
  6. *console.log(a)
  7. *a = 1
  8. */
  9. console.log(a)
  10. var  a = 1

LHS查询和RHS查询0

LHS查找变量函数名，RHS查找值

JS深入

变量定义

在 JS 中我们可以使用以下三种方式来定义一个变量，我们推荐使用前面两个

  1. let（变量，不能重复定义）
  2. const （常量，在定义时必须赋值 const a = 1）
  3. var
  • “var” 没有块级作用域

    块级作用域就是包含在{…}中的作用域

  1. if (true) {
  2.   var test = true; // 用 "var" 而不是 "let"
  3. }
  4. console.log(test); // true，变量在 if 结束后仍存在

  • “var” 在函数开头被处理

    1. function sayHi() {
    2. phrase = "Hello";
    3. console.log(phrase);
    4. var phrase;
    5. }
    6. sayHi();

  • …它完全等同于这个（var phrase 被上提到函数开头）：

    1. function sayHi() {
    2. var phrase;
    3. phrase = "Hello";
    4. console.log(phrase);
    5. }
    6. sayHi();

  • 可能你们不觉得有什么，但是你们看下面这段代码，这完全就和你的代码表现的不一致了

    1. function sayHi() {
    2. phrase = "Hello";
    3. console.log(phrase);
    4. if (false) {
    5.   var phrase; // var 没有块级作用域
    6. }
    7. }
    8. sayHi();

    其实 var 的危险不只有这些，这里只举了两个比较清楚好讲，其他区别可以看 ES6 系列之 let 和 const
    什么时候使用 let 或者 const
    我们建议优先使用 const，然后在使用 const 出现错误的时候再使用 let

JavaScript 基础 - 图6

注意：在这之后我们讲述都讲使用 let 和 const，来进行变量的声明，以避免不必要的麻烦

类型转换

  • 字符串转换
    • 显式的类型转换 String(value) ```javascript let value = true; console.log(typeof value); // boolean

value = String(value); // 现在，值是一个字符串形式的 “true” console.log(value, typeof value); // string

  2.    - 隐式的类型转换 **value + ''**
  3. ```javascript
  4. let value = true;
  5. console.log(typeof value); // boolean
  7. value = value + ''; // 现在，值是一个字符串形式的 "true"
  8. console.log(value, typeof value); // string
  • 数字型转换
    • 显式的类型转换 Number(value) 和 parseInt(string[, redix]) ```javascript const str = “123”; console.log(typeof str); // string

const num = Number(str); // 变成 number 类型 123 console.log(typeof num); // number

  2.    - 隐式的类型转换 **"6" / "2"**
  3. ```javascript
  4. console.log( '6' / '2' ); // 3, string 类型的值被自动转换成 number 类型后进行计算

  • 加号 ‘+’ 连接字符串
    几乎所有的算术运算符都将值转换为数字进行运算，加号 + 是个例外。如果其中一个运算元是字符串，则另一个也会被转换为字符串。

    1. console.log(1 + '2'); // '12' (字符串在加号右边)
    2. console.log('1' + 2); // '12' (字符串在加号左边)

  • 这仅仅发生在至少其中一方为字符串的情况下。否则值会被转换为数字。

    1. console.log(true + 2); // 3

  • 布尔型转换

    • 显式的类型转换 Boolean(value) ```javascript console.log(Boolean(1)); // true console.log(Boolean(0)); // false

console.log(Boolean(‘hello’)); // true console.log(Boolean(‘0’)); // true console.log(Boolean(‘ ‘)); // true (中间是空格) console.log(Boolean(‘’)); // false

  2.    - 隐式的类型转换 **if(value)** 和 ...
  3. ```javascript
  4. if ('hello') {
  5.     console.log('world');
  6. }
值 变成……
0
,
null
,
undefined
,
NaN
,
''		 false
其他值 true

JavaScript 基础 - 图7

函数

这些是上次课讲到的创建函数的方法

  1. // 函数声明
  2. function test(){
  3. }
  5. // 函数表达式
  6. const test = function(){
  7. };
  9. // 函数返回值
  10. function test(){
  11.     return 1;
  12. }

函数声明和函数表达式有什么区别？

  • 使用函数声明可使它的调用先于声明
    当 JavaScript 准备运行脚本或代码块时，它首先在其中查找函数声明并创建函数
    在处理完所有函数声明后，其他代码才被执行。所以我们能够在定义他之前使用这些函数 ```javascript sayHi(“John”); // Hello, John

function sayHi(name) { console.log( Hello, ${name} ); }

  2. - 而使用表达式声明就会出现这样的问题
  3. ```javascript
  4. sayHi("John"); // error!
  6. const sayHi = function(name) {
  7.   console.log( `Hello, ${name}` );
  8. };

箭头函数

例如我们有这样的一个表达式函数

  1. const sum = function(a, b) {
  2.     return a + b;
  3. }
  4. console.log(sum(1, 2))

事实上我们拥有一个简单并且减少很多麻烦的函数定义方式箭头函数

  1. const sum = (a, b) => {
  2.     return a + b;
  3. }
  4. console.log(sum(1, 2))

…我们还可以更加精简，在函数只有一行的时候我们可以将 {} 和 return 去掉

  1. const sum = (a, b) => a + b;
  2. console.log(sum(1, 2))

注意：为了简便后面函数函数定义我们都使用箭头函数

默认值

  1. const showMessage = (from, text = "没有给信息") => {
  2.     console.log( from + ": " + text );
  3. }
  4. showMessage("Ann"); // Ann: 没有给信息

不定数量的参数

你们应该注意到了，我们的调试大法 console.log(string1, string2, ...) 我们可以传许多的参数进去，难道 JS 在定义这个函数的时候要定义很多个参数吗？肯定不需要，我们可以使用下面的方式来接受不定数量的参数

  1. const _consoleLog = (string, ...args) => {
  2.     console.log(string, args);
  3. }
  4. _consoleLog('a', 'b', 'c', 'd', 'e'); // 'a' [ 'b', 'c', 'd', 'e' ]

JavaScript 基础 - 图8

对象

可以说除了基本数据以外的所有东西都是对象类型

我们之前复习的说过这样的一句话，在 JavaScript 中，对象深入到这门语言的方方面面。所以在我们深入理解这门语言之前，必须先理解对象。

在上节课我们已经知道了怎么去定义对象，这里我们可以将对象想象成存放文件的橱柜。文件按照他们的名字来排列。这样根据文件名（变量名）我们就很容易找到、添加或删除一个文件（变量）了。

JavaScript 基础 - 图9

对象只是带有属性和方法的特殊数据类型。

  • 创建
    我们可以用下面两种语法的任一种来创建一个空的对象（“空柜子”）：
  • new

  • 字面量表示 

    1. const user = new Object();
    2. const user = {};  // “字面量” 的语法

  • 通常，我们用花括号(后者)。这种方式我们叫做字面量。

JavaScript 基础 - 图10

事实上我们可以在创建的时候就立即给对象一些属性，在 {...} 里面放置一些键值对。

  1. const user = {         // 一个对象
  2.   name: "John",     // 键 "name"，值 "John"
  3.   age: 30,           // 键 "age"，值 30 (相当于: age: age)
  4. };
  1. const age = 30
  2. const nameStr = 'name'
  3. const user = {          // 一个对象
  4.   [nameStr]: "John", // 键 "name"，值 "John"
  5.   age,                  // 键 "age"，值 30 (相当于: age: age)
  6. };

属性有键（或者也可以叫做名字，标识符），在冒号的左边":"，值在冒号的右边。
在 user 对象中, 有两个属性：

  1. 第一个的键是 "name" 值是 "John"。
  2. 第二个的键是 "age" 值是 30。

JavaScript 基础 - 图11

  • 读取属性

    • 单个读取

      1. // 读取文件的属性
      2. console.log(user.name); // John
      3. console.log(user['age']); // 30 方括号中是可以放变量的

    • 循环遍历读取

      1. for(key in user) {
      2. // key 会是 user 中的键值
      3. console.log(user[key]); // 会执行两遍，返回 John 和 30
      4. }


  • 添加属性
    属性的值可以是任意类型，让我们加个布尔类型：

    1. user.isAdmin = true;
    2. // user['isAdmin'] = true; 也是可行的


JavaScript 基础 - 图12

  • 删除属性

    1. delete user.age;


JavaScript 基础 - 图13

  • 引用复制
    这个上节课是讲了的，我们不知道大家理解没有。
    对象类型与基本类型的变量有很大的区别

    • 原始类型：字符串，数字，布尔类型 – 是会复制一份再进行赋值的

      1. const message = "Hello!";
      2. const phrase = message;

    • 他们在内存中是两个不同的东西

JavaScript 基础 - 图14

  • 引用类型
    现在我们有了两个变量，但是都指向同一个对象，就像我们的一个抽屉带有两把钥匙，如果一个钥匙（admin）去使用了抽屉，稍后使用另外一个钥匙（user）打开的时候，就会看到有变化。
    1. const user = { name: 'John' };
    2. const admin = user;
    3. admin.name = 'Pete';
    4. console.log(user.name); // Pete

JavaScript 基础 - 图15

  • 复制
    那我们怎么解决这个问题，能否像原始类型那样在赋值的时候先复制一次答案是可以的
    这里只介绍一种简单的浅拷贝的方法，深拷贝你们后面会知道的。

    1. const user1 = Object.assign({}, user);
    • 浅拷贝 ```javascript const user = { name: “John”, sizes: { height: 182, width: 50 } };

const clone = Object.assign({}, user); clone.name = ‘hgk’; console.log(user.name, clone.name); console.log(user.sizes === clone.sizes); // true，同一个对象

// user 和 clone 共享 sizes 对象 user.sizes.width++; // 在这里改变一个属性的值 console.log(user.sizes.width, clone.sizes.width); // 51

  2. ---
  4. ![](https://cdn.nlark.com/yuque/0/2019/svg/150228/1572611616418-6914e48c-0c8e-4d05-9885-adfbd36ca0b0.svg#height=284&id=IYN3A&originHeight=284&originWidth=914&originalType=binary&size=0&status=done&style=none&width=914)
  6. <a name="10dc0e5c"></a>
  7. ## [垃圾回收](https://zh.javascript.info/garbage-collection)
  9. 对于开发者来说，JavaScript 的内存管理是自动的、无形的。我们创建的原始值、对象、函数……这一切都会占用内存。
  11. 当某个东西我们不再需要时会发生什么？JavaScript 引擎如何发现它、清理它？
  13. <a name="sUm9m"></a>
  14. ### 可达性
  16. JavaScript 中主要的内存管理概念是**可达性**。
  18. 简而言之，**『可达』**值是那些以某种方式可访问或可用的值。它们保证存储在内存中。
  20. 1. 这里列出固有的可达值基本集合，这些值明显不能被释放。<br />比方说：
  21.    - 当前函数的**局部变量**和**参数**。
  22.    - 嵌套调用时，当前调用链上**所有函数的变量与参数**
  23.    - **全局变量**
  24.    - （还有一些内部的）
  26. 这些值被称作**根**。
  28. 2. 如果一个值从**根**值访问到，则认为这个值是可达的。<br />比方说，如果局部变量中有一个对象，并且该对象具有引用另一个对象的，则该对象被认为是可达的。而且它引用的内容也是可达的。
  30. 在 JavaScript 引擎中有一个被称作垃圾回收器(GC)的东西在后台执行。它监控着所有对象的状态，并删除掉那些已经不可达的
  32. <a name="gfrMq"></a>
  33. ### 一个简单的例子
  35. ```javascript
  36. // user 引用了这个对象
  37. const user = {
  38.   name: "John"
  39. };

这里的箭头描述了一个对象引用。全局变量 "user" 引用了对象 {name："John"}

JavaScript 基础 - 图16

如果 user 的值被覆盖了，这个引用就没了：

  1. user = null;

JavaScript 基础 - 图17

大概把可达的概念讲清楚了，其他类容请看标题对应的教程。

对象方法与 “this”

在代码中我们使用频率最高的应该是，我们的调试大法console.log('hello')这样形式来执行方法，你们应该猜到了 console 是一个预定义的对象，而上面有 log 这个方法，但是我们之前只学会怎样去定义属性，那么怎样给对象定义方法？

对象通常被用来表示真实世界中的实体，比如用户等等：

  1. const user = {
  2.   name: "John",
  3.   age: 30
  4. };

另外，在现实世界中，用户可以操作：从购物车中挑选某物、登录、注销等。

在 JavaScript 中，操作是通过属性中的函数来实现。

我们类比于对象讲述方式来说，我们怎样去执行、添加或删除一个对象方法。

  • 创建 ```javascript const user = { name: “John”, age: 30, sayHi: function() { // 可以发现我们这里使用类似于“函数表达式”的方式来创建一个函数 console.log(“Hello”); } }; user.sayHi(); // Hello!

// 方法简写看起来更好，对吧？ const user = { name: “John”, age: 30, sayHi() { // 与 “sayHi: function()” 一样 console.log(“Hello”); } }; user.sayHi(); // Hello!

  2. - **添加**
  3. ```javascript
  4. const user = {
  5.   name: "John",
  6.   age: 30
  7. };
  9. user.sayHi = function() { // 请注意我们这里使用的是 “函数表达式” 来创建一个函数
  10.   console.log("Hello!");
  11. };
  13. user.sayHi(); // Hello!

注意：上面这两种创建函数的方法并不是在所有情况中表现是一样的

  • 删除
    1. const user = {
    2. name: "John",
    3. age: 30,
    4. sayHi() {
    5.   console.log("Hello");
    6. }
    7. };
    8. delete user.sayHi
    9. user.sayHi(); // TypeError: user.sayHi is not a function

方法中的 “this”

这时可能你会有疑问了❓ 我们怎么在对象方法中去访问到对象本身❓

相信你肯定想到了，比如上面的 user 定义之后应该在全局作用域中，我们无论在哪里都应该能访问到，在对象方法中也不例外。

  1. const user = {
  2.   name: "John",
  3.   age: 30,
  4.   sayHi() {
  5.     console.log(`我是：${user.name}`);
  6.   }
  7. };
  8. user.sayHi(); // "John"

…但是，这又是挖的一个坑，不是为啥章节的标题是 this 呀？事实上这样的代码是不可靠的。如果我们将 user 复制给另一个变量。例如 admin = user，并赋另外的值给 user，那么它将访问到错误的对象。

如下所示：

  1. let user = { // **** 这里我们使用了 let ******
  2.   name: "John",
  3.   age: 30,
  4.   sayHi() {
  5.     console.log(`我是：${user.name}`); // 导致错误
  6.   }
  7. };
  8. const boss = {
  9.   name: 'boss'
  10. }
  11. const admin = user; // 用户翻身当管理员
  12. user = boss; // 我们居然让 boss 去当 user 了
  13. admin.sayHi(); // 噢哟！在 sayHi() 使用了旧的变量名。叫成了 boss

那我们怎么才能，方便的在对象的方法中访问对象本身？对，就是我们的标题 this

  1. const user = {
  2.   name: "John",
  3.   age: 30,
  4.   sayHi() {
  5.     console.log(`我是：${this.name}`);
  6.   }
  7. };
  8. user.sayHi(); // "John"
  1. let user = { // **** 这里我们使用了 let ******
  2.   name: "John",
  3.   age: 30,
  4.   sayHi() {
  5.     console.log(`我是：${this.name}`);
  6.   }
  7. };
  8. const boss = {
  9.   name: 'boss'
  10. }
  11. const admin = user; // 用户翻身当管理员
  12. user = boss; // 我们居然让 boss 去当 user 了
  13. admin.sayHi(); // 噢哟！不错呦，叫对了。

请注意：它的值在普通情况(不是箭头函数)下并不取决于方法声明的位置，而是（取决）于在『点之前』的是什么对象。

  1. const user = { name: "John" };
  2. const admin = { name: "Admin" };
  4. const sayHi = function() {
  5.   console.log(`我是：${this.name}`);
  6. }
  8. // 在两个对象中使用的是相同的函数
  9. user.f = sayHi;
  10. admin.f = sayHi;
  12. // 它们调用时有不同的 this 值。
  13. // 函数内部的 "this" 是 ***点之前*** 的这个对象。
  14. user.f(); // John  (this == user)
  15. admin.f(); // Admin  (this == admin)
  17. admin['f'](); // Admin（使用点或方括号语法来访问这个方法，都没有关系。）

基本类型的方法

你可能有这样的疑问，String 又不是对象为什么他能像对象方法那样去使用❓

  1. const str = 'Hello';
  2. console.log(str.toUpperCase()); // HELLO

以下是 str.toUpperCase() 实际发生的情况：

  1. 字符串 str 是一个基本类型。所以在访问它的属性时，会即刻创建一个包含字符串字面值的特殊对象，并且具有很多有用的内置方法，例如 toUpperCase()。
  2. 该方法运行并返回一个新的字符串（由 console.log 显示）。
  3. 特殊对象被销毁，只留下基本类型 str。

所以基本类型可以提供方法，但它们依然是轻量级的。
JavaScript 基础 - 图18

构造函数和操作符 “new”

常规的 {...} 语法允许创建一个对象。但是我们经常需要创建许多类似的对象，例如多个用户或菜单项等等。

而你又不知道用户名字，你需要一个工厂或者说叫做模板的东西帮你创建一些差不多的对象，而这个就叫做构造函数。

构造函数

构造函数在技术上是常规函数。不过有两个约定：

  1. 他们首先用大写字母命名。
  2. 它们只能用 "new" 操作符来执行。 ```javascript function User(name) { this.name = name; this.isAdmin = false; this.sayHi = function() { console.log( “My name is: “ + this.name ); }; }

const user = new User(“Jack”);

console.log(user.name); // Jack console.log(user.isAdmin); // false user.sayHi()

  1. 当一个函数作为 `new User(...)`执行时，它执行以下步骤：
  3. 1. 一个新的空对象被**创建并分配**给 `this`。
  4. 2. 函数体执行。通常它会修改 `this`，为其**添加新的属性**。
  5. 3. **返回** `this` 的值。
  7. 换句话说，`new User(...)` 做类似的事情：
  8. ```javascript
  9. function User(name) {
  10.   // this = {};（隐式创建）
  12.   // 添加属性到 this
  13.   this.name = name;
  14.   this.isAdmin = false;
  16.   // return this;（隐式返回）
  17. }

所以 new User("Jack") 的结果是相同的对象：

  1. const user = {
  2.   name: "Jack",
  3.   isAdmin: false
  4. };

现在，如果我们想创建其他用户，我们可以调用 new User("Ann")，new User("Alice") 等等。比每次使用字面量创建要短得多，而且易于阅读。

这是构造函数的主要目的 — 实现可重用的对象创建代码

解构赋值

先看一个愚蠢的例子。。。。

  1. const arr = "Ilya Kantor".split(' ');
  3. const firstName = arr[0];
  4. const surname = arr[1];
  6. console.log(firstName); // Ilya
  7. console.log(surname);  // Kantor

数组解构

再看一个智者应该有的操作

  1. const arr = "Ilya Kantor".split(' ');
  3. // 解构赋值
  4. const [firstName, surname] = arr;
  6. console.log(firstName); // Ilya
  7. console.log(surname);  // Kantor

甚至他还有一些其他技巧

  • 忽略一部分

    1. const [ , , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
    2. // title:Consul

  • 剩余的 ‘…’ ```javascript const [name1, name2, …rest] = [“Julius”, “Caesar”, “Consul”, “of the Roman Republic”];

console.log(name1); // Julius console.log(name2); // Caesar

console.log(rest[0]); // Consul console.log(rest[1]); // of the Roman Republic console.log(rest.length); // 2

  2. - **默认值**
  3. ```javascript
  4. // 默认值
  5. const [name = "Guest", surname = "Anonymous"] = ["Julius"];
  7. console.log(name);    // Julius (来自数组的值)
  8. console.log(surname); // Anonymous (默认值被使用了)

对象解构

当然除了数组，解构赋值同样适用于对象。
基本的语法是：

  1. const {var1, var2} = {var1:…, var2:…}

在等号右侧有一个已经存在的对象，我们想把它拆开到变量中。等号左侧的“对象”包含了右侧对象相应属性的“模板”

  1. const options = {
  2.   title: "Menu",
  3.   width: 100,
  4.   height: 200
  5. };
  7. const {width, title, height} = options; // 甚至不需要满足顺序，只需要满足对应的属性就可以了
  9. console.log(title);  // Menu
  10. console.log(width);  // 100
  11. console.log(height); // 200

对象解构同样包含了 剩余的 ‘…’ 和 默认值 请大家自己尝试，或者看标题中的教程

嵌套解构

  1. const options = {
  2.   size: {
  3.     width: 100,
  4.     height: 200
  5.   },
  6.   items: ["Cake", "Donut"],
  7.   extra: true    // 一些不会被解构的额外属性
  8. };
  10. // 为了清晰起见，解构赋值语句被写成多行
  11. const {
  12.   size: { // 把 size 赋值到这里
  13.     width,
  14.     height
  15.   },
  16.   items: [item1, item2], // 把 items 赋值到这里
  17.   title = "Menu" // 在对象中不存在的属性（会使用默认值）
  18. } = options;
  20. console.log(title);  // Menu
  21. console.log(width);  // 100
  22. console.log(height); // 200
  23. console.log(item1);  // Cake
  24. console.log(item2);  // Donut

解构赋值.svg

递归

当一个函数解决一个任务时，在该过程中它可以调用很多其它函数。那么当一个函数调用自身时，就称其为递归。

例子

我们写一个函数 pow(x, n)，它可以计算 x 的 n 次方，即用 x 乘以自身 n 次。

  1. pow(2, 2) = 4
  2. pow(2, 3) = 8
  3. pow(2, 4) = 16

有两种实现方式。

  1. 迭代思路：for 循环：

    1. const pow = (x, n) => {
    2. let result = 1;
    3. // 在循环中用 x 乘以 result
    4. for (let i = 0; i < n; i++) {
    5.  result *= x;
    6. }
    7. return result;
    8. }
    9. console.log(pow(2, 3)); // 8

  2. 递归思路：简化任务，调用自身：

    1. const pow = (x, n) => {
    2. if (n == 1) {
    3.  return x;
    4. } else {
    5.  return x * pow(x, n - 1);
    6. }
    7. }
    8. console.log(pow(2, 3)); // 8

    比如，为了计算 pow(2, 3)，递归变体经过了下面几个步骤：

  3. pow(2, 3) = 2 * pow(2, 2)

  4. pow(2, 2) = 2 * pow(2, 1)
  5. pow(2, 1) = 2