JS基础知识小总结

最新推荐文章于 2019-06-25 21:40:06 发布

王贰拾888

最新推荐文章于 2019-06-25 21:40:06 发布

阅读量143

点赞数

分类专栏：个人心得

本文链接：https://blog.csdn.net/wangwenkai76/article/details/86777598

版权

个人心得专栏收录该内容

26 篇文章 0 订阅

订阅专栏

JS基础小总结

基础知识
- 原型、原型链
- 作用域
- 异步单线程
JS API
- DOM操作
- Ajax
- 事件绑定及解绑
开发环境
- 版本管理
- 模块化
- 打包工具
运行环境
- 页面渲染
- 性能优化

小知识点：

instanceof和typeof的区别：

instanceof可以用来判断对象中的类型（返回Boolean值），但是typeof判断对象类型中的属性的时候只能是Object（返回判断出来的类型）

变量类型和计算：

面试题：

JS中typeof能得到那些类型（JS变量类型）

typeof只能区分值类型的数据类型，只包括函数，但是对象的详细的类型是分不出来的

也就是只能区分出基本的类型，但是引用类习只能区分function，其他的全是Object

何时使用===何时使用==（类型的强制转换）
Window.onload和DOMContentLoaded的区别（浏览器的渲染过程）
用JS创建10个a标签点击的时候弹出对应的序号（作用域）
简述如何实现一个模块加载器，实现require.js的功能（JS模块化）
实现数组的随机排序（算法）

变量的类型和计算

强制类型转换
- 字符串拼接
- ==运算符
- 使用==运算符时，会进行隐式的数据类型转换
- if语句
  
  if括号中的判断条件中也会进行隐式的强制类型转换，会转换为Boolean值
- 在if里边是false的情况：0、NaN、null、undefined、false、''
- 逻辑运算

变量类型分为值类型和引用类型

值类型

引用类型：对象，数组，函数特点：在存储的时候，是在栈中存的地址，在栈中存的值

原型和原型链：

构造函数：

使用构造函数创建（new）一个实例的过程：

改变this指向（this变为一个空对象）
this.什么 = this.什么 ，进行this赋值
隐式的返回这个this也就是初始化好后的实例化对象

构造函数扩展：

var a = {} 其实是var a = new Object()的语法糖
var a = []其实是var a = new Array()的语法糖
function Foo(){}其实是var Foo = new Function(){}的语法糖
使用instanceof可以判断一个函数，是否是一个变量的构造函数

原型规则和示例：

原型规则：
- 所有的引用类型(数组、对象、函数)，都具有对象的特性，也就是可以自由的扩展属性（null除外）
- 所有的引用类型（数组、对象、函数，都有一个__proto__属性（隐式原型属性），属性的值是一个普通的对象
- 所有的函数，都有一个prototype属性（显式原型属性），属性值也是一个普通的对象
- 所有的引用类型（数组、对象、函数）的隐式原型属性(__proto__)都指向他的构造函数的显式原型属性(prototype)属性值，完全等于obj.__proto__ === Object.prototype
- 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么就会去他的__proto__(即它的构造函数的prototype中去寻找这个属性)
ps：在我们使用原型的过程中，无论调用的是实例对象自身的属性，还是通过原型链查找出来的属性，this指向的都是实例出来的这个对象，this指向的永远都是这个函数的自身。（this是谁调用的，就指向谁）
//原型中的this指向

function Foo(name, age) {

this.name = name;

this.age = age;

}

Foo.prototype.alertName = function() {

alert(this.name);

};

var f = new Foo("王文楷");

f.consoleName = function() {

console.log(this.name);

};

f.alertName();

f.consoleName();

验证是否是实例出来的对象自身的属性的方法：

使用hasOwnProperty()函数进行验证，如果是函数f自身的属性返回true，不是函数f自身的属性，返回false，所以使用for-in循环再添加判断条件：

for(item in f){
    if(f.hasOwnProperty(item)){//判断循环遍历出来的item属性是不是f自身的，如果是，返回true
        console.log(item);
    }
}

通过构造函数实例出来自身的隐式原型（__proto__）其实就是他的构造函数中的显式原型(prototype)的属性。

原型链：

instanceof原型链的一个具体的表现，是一个函数

可以用来判断引用类型属于哪个构造函数的方法，而且是可以通过原型链进行查找的。可以判断父级或者是祖先的构造函数。

JS中有那些内置函数
- Object、Array、Bollean、Number、String、Function、Date、RegExp、Error
- 内置函数的作用
JS变量按照存储方式区分为那些类型，并描述其特点
- 值类型，引用类型
- 值类型每个值是一个内存空间，引用类型是将指针存在栈中的，将真正的对象存在堆中
如何理解JSON
- JSON中也是JS中一个内置对象（中要）
- JSON常用API：
  - JSON.stringify({a:10,b:20}) 将对象变为字符串
  - JSON.parse('{a:10,b:20}') 将字符串变为对象

如何准确判断一个变量是数组类型
写一个原型链继承的例子
描述new一个对象的过程
- 创建一个新对象
- 改变this指向，
- 对this进行赋值
- 隐式的返回这个对象
zepto（或其他框架）源码中如何使用原型链
- 参见文件原型继承实例

闭包和作用域：

知识点：

执行上下文
- 范围：一段<script></script>或者一个函数作用域内
- 全局：变量定义、函数声明
- 函数：变量定义、函数声明、this、arguments
this
- 只有在执行的时候才能确认this到底是谁，定义的时候是无法确认的
- 改变this指向的三种方式（call、apply、bind`）
- 使用bind进行this指向改变的时候，只能是函数表达式通过点的形式给点出来，不能是函数声明的形式
作用域
作用域链
闭包
- 闭包的使用情况：
  - 函数作为返回值
  - 函数作为参数传递

题目：

变量提升的理解
- 就是执行期上下文的概念
- 变量定义
- 函数声明（函数声明和函数表达式是有区别的）
说明this几种不同的使用场景
- 作为构造函数执行
- 作为对象属性执行
- 作为普通函数执行
- call、apply、bind的作用
创建10个<a>标签，点击的时候弹出相应的序号
- 闭包的原因，见代码
如何理解作用域
- 自由变量
- 作用域链、即在嵌套作用域中的自由变量的查找
- 闭包的两个场景
  - 函数当作返回值
  - 函数当作参数传递
实际开发中闭包的应用
- 封装变量、收敛权限（可以用来判断用户是不是第一次加载）详情见代码

异步和单线程：

知识点
- 什么是异步（对比同步）：
- 前端使用异步的场景：
  - 可能发生等待的情况（在等待的时候我们继续做我们的事情），也就是需要等待的情况
  - setTimeout和setInveral定时任务
  - 网络请求：ajax请求，动态<img>加载（懒加载）
```
<script>
    //图片加载需要异步处理的情况
    console.log("start");
    var img = document.createElement('img');
    img.onload = function () {
      console.log("loaded");
    }

    img.src = '接口地址';
    console.log("end");
  </script>
```
  - 事件绑定
- 异步和单线程：

ps:所有的异步的场景在执行的时候都会被拿出去放置在其他地方，暂时不会执行，（定时任务即使没有添加时间延时，也会被放置在外边等待单线程执行结束之后才会被执行）在单线程的程序执行结束之后，处于空闲状态时，会立马查看被存起来的程序的执行。
题目：
- 同步和异步的区别是什么？分别举一个同步和异步的例子
  - 区别：有没有阻塞程序进行
  - 同步会阻塞代码，而异步不会阻塞代码
  - 例子：alert是同步，setTimeot是异步
- 一个关于setTimtOut的笔试题
- 前端使用异步的场景
  - 需要使用定时任务的场景
  - 网络请求
  - 事件绑定

其他知识：

题目：
- 获取2017-06-10格式的日期
- 获取随机数，要求是长度一致的字符串格式
  - ps：算法思想：假如我们需要获取未知长度，但得是长度一致的字符串的方法：我们在原来的字符串的后边添加一定数量的个数，然后使用slice方法进行截取即可
- 写一个能遍历对象个和数组的通用的forEach函数
知识点：
- 日期的API：
- 数组的API:
- sort函数中，函数会传递两个参数。a和b，当返回的是a-b的时候就是升序，当返回的是b-a的时候，就是降序
对象API：（for-in）:
解答