JS基础

小宁子呀
739 阅读2分钟

原型链的概念

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，
如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，
如果还没有找到就会再在构造函数的prototype的__proto__中查找，
这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

事件代理/事件委托

利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行

函数声明 & 函数表达式

/* 函数声明 */
function getData(){} 
存在变量提升
可以声明前以方法调用

/* 函数表达式 */
var getData=function(){} 
只是把变量名称提升 
打印会是undefined;

原生Dom点击事件的绑定

1. box.onlick= function(){}

2. box.addEventListener("click",function(){},false);

3. <button onclick="xxx()"></button>

JS事件流模型

/* 事件冒泡 */
事件开始由最具体的元素接受，然后逐级向上传播

/* 事件捕捉 */
事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

/* 三个阶段 */
事件捕捉，目标阶段，事件冒泡

兼容 - 获取事件对象target

/* IE */
event.srcElement

/* 标准 */
event.target

兼容 - 阻止事件冒泡

/* IE */
event.cancelBubble = true

/* 标准 */
event.stopPropagation()

兼容 - 阻止默认行为

/* IE */
event.returnValue = false

/* 标准 */
event.preventDefault()

正则：判断字符串以字母开头，后面可以是数字，下划线，字母，长度为6-30

var reg=/^[a-zA-Z]\w{5,29}$/

null & undefined的区别

null转为数值时为0
undefined转为数值时为NaN

null表示已有值，是个[无]的对象
而undefined表示缺少值，在变量声明未赋值的时候是undefined

typeof & instanceof

typeof：(常用于检测基本类型)
    string  // string
    number  // number
    boolean // boolean 
    undefined // undefined
    function // function
    object  // object
    null    // object
    array   // object
    
instanceof (用于检测复杂类型)
    [] instanceof Array // true
    [] instanceof Object // true
    {} instanceof Object // true
/* 解释1：obj instanceof Object 检测Object.prototype是否存在于参数obj的原型链上 */
    function Person(){}
    var p =new Person()
    console.log(p instanceof Person) // true
/* 解释2：继承中判断实例是否属于它的父类 */
    function Person(){}
    function Student(){}
    var p =new Person()
    Student.prototype=p // 继承原型
    var s=new Student() // Student和Person都在s的原型链中
    console.log(s instanceof Student) // true
    console.log(s instanceof Person) // true

如何获取JS多个数值中的最大值和最小值

var arr = [1, 3, 2]

1. 
    Math.max(...arr) // 3
    Math.min(...arr) // 1
2. 
    var result = arr.sort(function(a,b){return a-b})
    result[result.length-1] // 3
    result[0] // 1

input的readonly & disable属性

readonly寓意为只读，不可编辑，可以选择和复制
disable寓意为禁用，不可编辑，不可以选择复制和点击

主要数据类型 & 复合数据类型 & 特殊类型

主要数据类型：string, boolean, number
复合数据类型：function, object
特殊类型：undefined，null

捕获错误的语法

try{

}catch(e){

}finally{

}

JS原始弹窗类型

警告窗口     alert('产生错误')     
确认窗口     confirm('确定要提交吗')   
信息输入窗口  prompt('请输入SVN密码')

节点的种类有几种，分别是什么

元素节点：nodeType ===1
属性节点：nodeType ===2
文本节点：nodeType ===3

innerHTML & outerHTML

var el=document.createElement('span');
el.innerHtml='我是文本';
el.innerHTML(元素内包含的内容):  我是文本
el.outerHTML(自己以及元素内的内容):  <span>我是文本</span>

检测是否为字符串

1. typeof(str) === 'string'
2. str.constructor === String

判断两个对象数据相同

var obj1 = {a:1,b:2}
var obj2 = {a:1,b:2}
JSON.stringify(obj1) === JSON.stringify(obj2) // true

_ proto _ & prototype & Object.getPrototypeOf()

/* __proto__是指内部原型，和Object.getPrototypeOf()结果等价 */

function f(){}
f.proto === Object.getPrototypeOf(f) // true
f.prototype === Object.getPrototypeOf(f) //false

判断是否为数组

var arr = [1, 2, 3]

1. Object.prototype.toString.call(arr) === '[object Array]'
2. arr instanceof Array

如何中断ajax请求

ajax.abort()

target & currentTarget

event.target是触发事件的元素
event.currentTarget是绑定事件的元素

export & export default

// 抛出对应引入
export default  xxx
import xxx from './'

// 抛出对应引入
export xxx
import {xxx} from './'

什么是会话cookie , 什么是持久cookie

cookie是服务器返回的，指定了expire time（有效期）的是持久cookie
没有指定的是会话cookie

IE的各种兼容问题

1. IE8一下不支持querySelector | querySelectorAll
2. IE创建ajax：new ActiveXObject()
3. IE事件绑定：attachEvent,datachEvent
4. IE取消冒泡：cancelBubble
5. IE取消默认行为：event.returnvalue = false
6. IE的目标事件:event.srcElement

ES6箭头函数和普通函数区别

1. 普通函数this指向声明时的作用域，可以改变其this指向；
   箭头函数自身没有this，语法内使用到的this来自调用时的父级作用域
2. 箭头函数没有arguments
3. 箭头函数不可以被实例化

JS作用域

全局作用域
局部作用域（函数会产生作用域隔离）

复杂数据类型的检测

Object.prototype.toString.call(obj)  // "[object Object]"
Object.prototype.toString.call(arr)  // "[object Array]"

数组合并

1. arr1 = arr1.concat(arr2)
2. arr1 = [...arr1, ...arr2]

http1 & http2区别（简单总结）

1. 二进制分帧
2. 多路复用
3. header压缩
4. 服务端推送

http & https区别（简单总结）

1. 端口 // 80 443
2. 证书 // 免费 数字认证
3. 安全 // 超文本传输 ssl加密传输

JS的堆栈

基本数据存于 栈
引用数据存于 堆

jsonp原理 (jsonp是一种跨域通信的手段)

1. 首先是利用动态创建的script标签的src属性来实现跨域。
2. 通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。
3. 由于使用script标签的src属性，因此只支持get方法

常见http请求响应状态码

1xx (临时响应)
2xx (成功)
3xx (已重定向)
4xx (请求错误)
  400 请求出现错误，比如请求头不对等。
  401 没有提供认证信息。请求的时候没有带上 Token 等
  403 请求的资源不允许访问。就是说没有权限。
  404 请求的内容不存在。
5xx (服务器错误)

暂时性死区问题

var a = 100;
if(1){
  a = 10;
  //在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a，
  // 而这时，还未到声明时候，所以控制台Error:Cannot access 'a' before initialization
  let a = 1;
}

什么是文档碎片

定义：一个容器，用于暂时存放创建的dom元素，使用document.createDocumentFragment()创建

作用：将需要添加的大量元素 先添加到文档碎片 中，再将文档碎片添加到需要插入的位置，大大减少dom操作，提高性能

例子：
      var oFragmeng = document.createDocumentFragment(); 
      for(var i=0;i<10000;i++){ 
          var op = document.createElement("span"); 
          var oText = document.createTextNode(i); 
          op.appendChild(oText); 
          //先附加在文档碎片中
          oFragmeng.appendChild(op);  
      } 
      //最后一次性添加到document中
      document.body.appendChild(oFragmeng);

AMD 和 CMD 的区别？

AMD
    require.js
      1、AMD的api默认一个当多个用
      2、依赖前置，异步执行
CMD
    sea.js
      1、CMD的api严格区分，推崇职责单一
      2、依赖就近，按需加载，同步执行

Commonjs 和 ES6 Module的区别

/* 摘录*/
1、Commonjs是拷贝输出，ES6模块化是引用输出
2、Commonjs是运行时加载，ES6模块化是编译时输出接口
3、Commonjs是单个值导出，ES6模块化可以多个值导出
4、Commonjs是动态语法可写在函数体中，ES6模块化静态语法只能写在顶层
5、Commonjs的this是当前模块化，ES6模块化的this是undefined

$ajax & axios & fetch

/* $ajax */
  jquery封装和维护
  基于XmlHttpRequest
  有回调地狱的问题
/* axios */
  基于XMLHttpRequest
  支持 Promise API
  安全方面防止CSRF(让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的)
  提供了一些并发请求的接口
  从 node.js 创建 http 请求
  拦截请求和响应
  转换请求和响应数据
  取消请求
  自动转换JSON数据
/* fetch */
  基于promise设计，支持async/await
  属于底层api，不是ajax的封装
  脱离了XHR，是ES规范里新的实现方式 -->
avatar
文章
阅读
粉丝