JavaScript 从入门到精通

FrontEnd PV:

1. this

​ 解析器在调用函数每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this，this指向的是一个对象， 这个对象我们称为函数执行的 上下文对象，根据函数的调用方式的不同，this会指向不同的对象，以方法的形式调用时，this就是调用方法的那个对象。当我们直接调用一个全局的函数的时候其实就是 window 对像上面的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function fun(){
   console.log(this.name);
}

//创建一个对象
var obj = {
   name:"孙悟空",
   sayName:fun
};

var obj2 = {
   name:"沙和尚",
   sayName:fun
};

var name = "全局的name属性";

//以函数形式调用，this是window
//fun();

//以方法的形式调用，this是调用方法的对象
//obj.sayName();
obj2.sayName();

2. 构造函数

创建一个构造函数，专门用来创建Person对象的， 构造函数就是一个普通的函数，创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写构造函数和普通函数的区别就是调用方式的不同，普通函数是直接调用，而构造函数需要使用new关键字来调用
构造函数的执行流程：

  1. 立刻创建一个新的对象
  2. 将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建
  3. 逐行执行函数中的代码
  4. 将新建的对象作为返回值返回

使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。我们将通过一个构造函数创建的对象，称为是该类的实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Person(name , age , gender){
   this.name = name;
   this.age = age;
   this.gender = gender;
   this.sayName = function(){
      alert(this.name);
   };
}

function Dog(){
   
}

var per = new Person("孙悟空",18,"男");
var per2 = new Person("玉兔精",16,"女");
var per3 = new Person("奔波霸",38,"男");

var dog = new Dog();

使用instanceof可以检查一个对象是否是一个类的实例语法：

对象 instanceof 构造函数

如果是，则返回true，否则返回false

3. 原型

​ 我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象，如果函数作为普通函数调用prototype没有任何作用，当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__来访问该属性
原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。
​ 当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了。

​ 使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true。可以使用对象的hasOwnProperty() 来检查对象自身中是否含有该属性，使用该方法只有当对象自身中含有属性时，才会返回true。

​ 原型对象也是对象，所以它也有原型，当我们使用一个对象的属性或方法时，会现在自身中寻找，自身中如果有，则直接使用，如果没有则去原型对象中寻找，如果原型对象中有，则使用， 如果没有则去原型的原型中寻找,直到找到Object对象的原型，Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回 null。

1
console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));

构造函数和让他的原型对象是互相引用的：

4. call 和 apply

  • 这两个方法都是函数对象的方法，需要通过函数对象来调用
  • 当对函数调用call()和apply()都会调用函数执行
  • 在调用call()和apply()可以将一个对象指定为第一个参数
    此时这个对象将会成为函数执行时的this
  • call()方法可以将实参在对象之后依次传递
  • apply()方法需要将实参封装到一个数组中统一传递
  • this的情况：
    1.以函数形式调用时，this永远都是window
    2.以方法的形式调用时，this是调用方法的对象
    3.以构造函数的形式调用时，this是新创建的那个对象
    4.使用call和apply调用时，this是指定的那个对象

5. 数组的方法

1. slice()

  • 可以用来从数组提取指定元素

  • 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回

  • 参数：
    1.截取开始的位置的索引,包含开始索引
    2.截取结束的位置的索引,不包含结束索引

    第二个参数可以省略不写,此时会截取从开始索引往后的所有索引可以传递一个负值，如果传递一个负值，则从后往前计算 -1 倒数第一个 -2 倒数第二个

2.splice()

  • 可以用于删除数组中的指定元素
  • 使用splice()会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回
  • 参数：
    第一个，表示开始位置的索引
    第二个，表示删除的数量
    第三个及以后，可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

3.concat()

可以连接两个或多个数组，并将新的数组

  • 该方法不会对原数组产生影响

4. join()

​ 该方法可以将数组转换为一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回，在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符如果不指定连接符，则默认使用,作为连接符。

5. reverse()

​ 该方法用来反转数组（前边的去后边，后边的去前边）该方法会直接修改原数组

6.sort()

​ 可以用来对数组中的元素进行排序也会影响原数组，默认会按照Unicode编码进行排序.

​ 即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，所以对数字进排序时，可能会得到错误的结果。我们可以自己来指定排序的规则,我们可以在sort()添加一个回调函数，来指定排序规则。

6. Date

创建一个Date对象如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间。创建一个指定的时间对象需要在构造函数中传递一个表示时间的字符串作为参数日期的格式 月份/日/年 时:分:秒

1. getDate()

​ 获取当前日期对象是几日。

2. getDay()

​ 获取当前日期对象时周几会返回一个0-6的值 0 表示周日1表示周一

3. getMonth()

​ 获取当前时间对象的月份会返回一个0-11的值0 表示1月1 表示2月11 表示12月

4.getFullYear()

​ 获取当前日期对象的年份

5. getTime()

​ 获取当前日期对象的时间戳

7. Math

1.Math.ceil()

  • 可以对一个数进行向上取整，小数位只有有值就自动进1

2.Math.floor()

可以对一个数进行向下取整，小数部分会被舍掉

3.Math.round()

可以对一个数进行四舍五入取整

4.Math.random()

可以用来生成一个0-1之间的随机数

8. 事件冒泡

​ 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡。

1
2
3
4
5
6
7
s1.onclick = function(event){
   event = event || window.event;
   alert("我是span的单击响应函数");
   //取消冒泡
   //可以将事件对象的cancelBubble设置为true，即可取消冒泡
   event.cancelBubble = true;
};

1. 事件的委派

​ 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
从而通过祖先元素的响应函数来处理事件。事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

2. 事件绑定

addEventListener() 通过这个方法也可以为元素绑定响应函数，参数：

  1. 事件的字符串，不要on
  2. 回调函数，当事件触发时该函数会被调用
  3. 是否在捕获阶段触发事件，需要一个布尔值，一般都传false

使用addEventListener()可以同时为一个元素的相同事件同时绑定多个这样的事件。当事件被触发时，响应函数将会按照函数的绑定顺序执行。

3. 事件传播

将事件传播分成了三个阶段

  1. 捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
  2. 目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件
  3. 冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true，一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false。

8.数据类型

undefined 指的是变量定义了但是没有赋值过，而 null 则是指他被赋值了，并且赋值为 null

9. 闭包

​ 闭包在一个函数内部声明了一个内部函数，并且这个内部函数引用了外部函数的变量。

​ 闭包：闭包是包含被引用变量的对象，或者简单的理解为嵌套的内部函数

​ 闭包在执行外部函数的时候就产生了，不用等到内部不函数执行。

1.闭包的作用：

  1. 使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期

  2. 让函数外部可以操作(读写)到函数内部的数据(变量/函数)

2. 生命周期

  1. 产生: 在嵌套内部函数定义执行完时就产生了(不是在调用)
  2. 死亡: 在嵌套的内部函数成为垃圾对象时

3. 应用

​ 具有特定功能的js文件，将所有的数据和功能都封装在一个函数内部(私有的)，只向外暴露一个包信n个方法的对象或函数，模块的使用者, 只需要通过模块暴露的对象调用方法来实现对应的功能。

方案一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function myModule() {
  //私有数据
  var msg = 'Hello'
  //操作数据的函数
  function doSomething() {
    console.log('doSomething() '+msg.toUpperCase())
  }
  function doOtherthing () {
    console.log('doOtherthing() '+msg.toLowerCase())
  }
  //向外暴露对象(给外部使用的方法)
  return {
    doSomething: doSomething,
    doOtherthing: doOtherthing
  }
}

方案二：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(function () {
  //私有数据
  var msg = 'My atguigu'
  //操作数据的函数
  function doSomething() {
    console.log('doSomething() '+msg.toUpperCase())
  }
  function doOtherthing () {
    console.log('doOtherthing() '+msg.toLowerCase())
  }
  //向外暴露对象(给外部使用的方法)
  window.myModule2 = {
    doSomething: doSomething,
    doOtherthing: doOtherthing
  }
})()

4. 缺点及解决方案

1.缺点

  • 函数执行完后, 函数内的局部变量没有释放, 占用内存时间会变长

  • 容易造成内存泄露

    2.解决

  • 能不用闭包就不用

  • 及时释放，将闭包设置为null

Powered by Hexo and Hexo-theme-hiker

Copyright © 2015 - 2021 昨夜凛雨 All Rights Reserved.

UV : | PV :