JS基础学习记录1
前端JS面试视频重要知识点:
1.原型规则:
1:所有引用类型(数组，对象，函数),都具有扩展性，null没有。
2.所有引用类型(数组，对象，函数)都有隐式原型__proto__属性，属性值是一个普通对象。符合第一条浏览器自己为对象创建的。
3:所有函数都有prototype属性，属性值是一个普通对象。这个为现式原型。符合第一条浏览器自己为对象创建的。
4:所有引用类型(数组，对象，函数)，__proto__属性值指向它的构造函数的prototype属性值。
5:当试图得到一个对象的属性，这个对象本身没这个属性，那么会去__proto__中找，即构造函数的prototype属性。
2.判断对象自身是否有某些属性:hasOwenProperty
js面试技巧视频学习：包括三部分—js基础，js web api，js开发环境。
查的：
一般情况下，一个页面的相应加载顺序是：域名解析——>加载html——>加载js和css——>加载图片等其他信息
2019.10.08
js基础:原型/原型链，作用域/闭包，异步/单线程。
Web api：DOM，js事件绑定，ajax。
开发环境：版本管理，打包工具，模块化。
运行环境：页面渲染，性能优化。
1,typeof得到哪些类型？
只能区分值类型的详细类型。
undefined,object(包括null),boolean,number,string,symbol，function。
2,何时用===何时用==?
==会有类型转换，三等不会，必须类型和值都相等。
3，window.onload DOMContentLoaded区别 ？
解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。//js之类的
DOM树构建完成。//DOMContentLoaded
加载图片等外部文件。
页面加载完毕。//load
在第4步的时候DOMContentLoaded事件会被触发。在第6步的时候load事件会被触发。
4，js创建10个a标签，点击弹出对应序号。
5,简述如何实现一个模块加载器，实现require.js基本功能。
6,实现数组的随机排序。
function shuffle(arr){
var i = arr.length,t,j;
while(i){
j = Math.floor(Math.random()* i--);
t = arr[i];
arr[i]= arr[j];
arr[j]= t;
}
}
//对应的ES6如下
function shuffle(arr){
let i = arr.length;
while(i){
let j = Math.floor(Math.random()* i--); //5555
[arr[j],arr[i]]=[arr[i],arr[j]];
}
}
变量类型和计算：
变量类型：值类型，引用类型。
1,typeof得到哪些类型？
2,何时用===何时用==?
3,js有哪些内置函数？
4，如何理解json？
5,js按照存储方式分为哪些类型，描述其特点。
值类型，引用类型。
2019.10.10
1，引用类型：对象，数组，函数。
2，变量计算
2.1，强制类型转换：字符串拼接，==（a==null(等价于：a===null || a===undefined)），if语句，逻辑运算。
2.2，js有哪些内置函数:
数据封装类型：Boolean,String,Number,Object,
Array,Function,Error,Date,RegExp
2020.02.11
1，作用域和闭包
题目：
a,说明一下对变量提升的理解；
b,说明this几种不同的使用场景；
this要在执行时才能确认值，定义是无法确定。
c,创建10个a标签，点击时弹出对应序号
for(var i=0;i<10;i++){
var a=document.createElement('a');
a.value=i
a.innerHTML=a.value+'
';
document.body.appendChild(a)
a.onclick=function(){
console.log(i,event,this)
alert(this.text)
}
}
for(let i=0;i<10;i++){
let a= document.createElement('a');
a.innerHTML=i;
a.style.color='red';
a.style.fontSize="30px"
a.onclick=()=>{
alert(i)
}
document.body.appendChild(a)
}
修改HTML文档内容最简单的方法是，使用innerHTML属性。
attribute:改变元素属性值
d,如何理解作用域；
e,实际开发中闭包的作用；
函数声明与函数表达式区别：
函数声明：function fn(){...}
函数表达式：var a=function(){}
2020.02.12
1.this场景
a构造函数中
b对象 指向对象
c函数中指向window
d call apply bind改变this指向
2020.02.13
1.闭包的使用场景
1.函数作为返回值 原始声明作用域
2.函数作为参数传递 原始声明作用域
2.异步的理解
1.同步和异步的区别？举同步异步例子
同步例子：一直等到确定再执行第二个打印，阻塞代码执行
console.log（1）
alert（2）
console.log（3）
异步例子:打印顺序1.3.2
console.log（1）
settimeout（function（） ｛console.log（2）｝）
console.log（3）
2.settimeout面试题
3.一些使用异步的场景
几个问题：
什么是异步，
不会立即顺序执行，执行需要等待
前端使用异步的场景，
等待的情况下使用异步，
定时任务：setTimeout、setInverval；
网络请求：ajax请求，img加载；
事件绑定：绑定了放在那，点击了去执行；
异步和单线程，
单线程，不能同时干两件事。
JS内置对象：Math，Array，JSON，Object，Boolean，Date，String，Number，
2020.02.15
其他基础知识：日期，Math，数组和对象的API.
题目：
实现2017-10-12的格式日期获取。
获取随机数，要求是长度一致的字符串格式。
写一个遍历对象与数组的通用forEach函数。
function forEach...待完成
2020.02.16
1.DOM属于哪种数据结构？
树
2020.02.17
1.常说的js组成部分：js基础知识(ECMA262标准),web-api部分(w3c标准)
2，DOM操作:Document,Object,Model，即文档对象模型。
DOM的本质：将html代码结构化，让浏览器可以识别，让js可识别。
3，获取DOM节点操作：
获取DOM节点
property获取的html结构对象有的属性
Attribute html文档的属性
2020.02.19
1，BOM:broswer,object,model，浏览器对象模型。
浏览器属性的获取:navigator
屏幕信息:screen
地址栏信息：location
历史：history
2，题目
编写一个通用的事件绑定函数
ÅÅÅÅ
描述事件冒泡流程
对于一个无限下拉加载图片的页面，如何给每个图片绑定事件。
2020.02.22
1. //这里我们创建了一个单例模式
let single =function(fn){let ret;
return function(){console.log(ret);
// render一次undefined,render二次true,render三次true
//所以之后每次都执行ret，就不会再次绑定了
return ret ||(ret = fn.apply(this,arguments));}};
let bindEvent =single(function()
{//虽然下面的renders函数执行3次,bindEvent也执行了3次
//但是根据单例模式的特点，函数在被第一次调用后，之后就不再调用了
document.getElementById('box').onclick =function(){alert('click');}
return true;});
let renders =function(){console.log('渲染');
bindEvent();
}
renders();
renders();
renders();
理解下这三个函数:
call:
apply:
bind:
this 的指向:
在 ES5 中，其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象，来，跟着我朗读三遍：this 永远指向最后调用它的那个对象，this 永远指向最后调用它的那个对象，this 永远指向最后调用它的那个对象。记住这句话，this 你已经了解一半了。
// 构造函数:
functionmyFunction(arg1,arg2){
this.firstName = arg1;
this.lastName = arg2;
}
// This creates a new object
vara =newmyFunction("Li","Cherry");
a.lastName; // 返回 "Cherry"
这就有要说另一个面试经典问题：new 的过程了，(ಥ_ಥ)
这里就简单的来看一下 new 的过程吧：
伪代码表示：
vara =newmyFunction("Li","Cherry");
newmyFunction{
varobj = {};
obj.__proto__ = myFunction.prototype;
varresult = myFunction.call(obj,"Li","Cherry");
returntypeofresult === 'obj'? result : obj;
}
创建一个空对象 obj;
将新创建的空对象的隐式原型指向其构造函数的显示原型。
使用call改变this的指向
如果无返回值或者返回一个非对象值，则将 obj 返回作为新对象；如果返回值是一个新对象的话那么直接直接返回该对象。
所以我们可以看到，在 new 的过程中，我们是使用 call 改变了 this 的指向。
2020.02.26
1，编写一个通用的事件监听函数
function bindEvent(id,type,fn){
// id:元素id type:事件类型callback：回调函数
let elem=document.getElementById(id)
// IE低版本使用attachEvent，和w3c标准不一样
elem.addEventListener(type,function(e){
fn(e)
})
}
e.stopPropagation()//组织冒泡往上冒泡往父节点dom一层一层向上冒泡
e.preventDefault()//阻止默认事件比如a标签点击会跳转
// 事件代理
let elem=document.getElementById(id)
function bindEvent(elem,type,selector,fn){
// id:元素id type:事件类型fn：回调函数
if(fn==null){
//当没有选择元素的时候，第三个参数直接传回调方法，重新赋值一下
fn=selector
selecor=null
}
// IE低版本使用attachEvent，和w3c标准不一样
console.log(fn,selector)
elem.addEventListener(type,function(e){
// e指向目标点击元素
console.log(e)
var target
if(selector){
target=e.target
if(target.matches(selector)){
// this调用指向windows this指向目标元素
fn.call(target,e)
}
}else{
//为啥这里不需要改变this指向 因为例子里面直接用的外部elem去操作没用this
fn(e) //
}
})
}
2020,02,27
1,描述事件冒泡的流程
DOM树形结构
时间冒泡
组织冒泡
冒泡应用
无限下拉图片点击事件怎么写 ：使用代理 ，绑定父元素，使用前面的bindEvent方法。
2，Ajax
题目
手动编写一个ajax，不依赖第三方库
var xhr=new XMLHttpRequest()
xhr.open("GET","/api",true)// false:使用同步，请不要编写onreadystatechange函数-把代码放到send()语句后面即可
xhr.onreadystatechange=function(){
//这里的函数异步执行
if(xhr.readyState==4){
//0:未初始化，还没有调用send()方法
//1:载入，已调用send()，正在发请求
//2:暂入完成，send()方法执行完成，已经接受全部响应内容
//3:交互，正在解析响应内容
//4:完成，响应内容解析完成，可以在客户端调用了
if(xhr.status==200){
// 2xx：表示成功处理请求。如200
// 3xx:需要重定向，浏览器直接跳转
// 4XX:客户端请求错误，如404
// 5xx:服务端错误
alert(xhr.responseTsxt)
}
}
}
xhr.send(null)
// 同步去请求页面：只会打印最后xhr.readyState==4的结果 ;异步会答应1-4四次结果
var xhr=new XMLHttpRequest()
xhr.open('GET','https://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp',false)
xhr.onreadystatechange=function(){
console.log(xhr)
}
xhr.send(null)
IE低版本：ActiveObject 低版本现在基本放弃
跨域的几种实现方式 跨域的原理
知识点：
XMLHttpRequest
状态码说明
实现原理
跨域：
什么是跨域
浏览器同源策略，不允许ajax访问其他域接口
跨域条件：协议、域名、端口，有一个不同就算跨域。
三个标签的场景
可以使用CDN，CDN也是其他域
可以用于JSONP
跨域注意事项：所有跨域请求必须经过信息提供方允许。
JSONP前端（源码查看，自己手动敲一下）
JSONP实现原理：服务器根据请求动态返回一个文件
服务器端设置 http header（可以后续继续了解）
存储：
题目：
请描述一下cookie，sesstionStorage,localStorage的区别
cookie：客户端用于客户端和服务端通信。但是他有本地存储的功能。（存储的就是字符串）服务端可以获取。
存储缺点：只有4kb，存储量小；所有http去哪个球都带着，会影响获取资源的效率；API简单，需要封装。
下面两个是h5为存储而设计，最大容量5M，不用在请求中带着。
坑：ios safari隐藏模式下localtionStorage.getItem()会报错。
sesstionStorage：浏览器页面、回话结束关闭数据清空
localtionStorage：存储在本地，数据清空需手动清理
第六章学习完
第7章节：开发环境
关于开发环境：
面试官想通过开发环境了解面试者的经验；
开发环境，最能体现工作产出的效率；
IDE（写代码的效率）：webstorm,sublime,vscode,atom(插件、快捷键提高编码效率)
git(代码版本管理，多人写作开发)：版本迭代管理；追溯代码；多人协作；
JS模块化
打包工具
上线回滚的流程
VScode git zeplin
2020.03.01
1.AMD:异步模块规划
工具require.js:引入后，会生成全局define函数，全局require函数，依赖js会自动异步加载。
20200312
var、let、const的区别
var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
2020.03.14
1,require.js
2020.04.06
1，为什么全局定义log要用bind？
constlog = console.log.bind(console)
var a = document.write;
a('hello');
//Error
a.bind(document)('hello');
//hello
a.call(document,'hello');
//hello
注意：这里直接调用a的话，this指向的是global或window对象，所以会报错，通过bind或者call的方式绑定this至document对象，即可正常调用
2020.04.10
1，Commonjs
Commonjs不会异步加载js，而是同步一次性加载出来
moudle.exports={key:value} //导入
require(path)//引入
异步加载js，AMD，使用npm用CommonJS.
2,构建工具
grunt
gulp
fis3
Webpack
npm intsall http-server本地起http服务工具
2022.04.12
1，window.onload和DOMContentLoaded
// 图片视频是异步加载
window.addEventListener(‘load’,function(){
//页面全部资源加载完才会执行，包括视频图片等
})
window.addEventListener(‘DOMCotent;Loaded’,function(){
// DOM渲染完即会执行，此时图片视频可能没加载完
})
2020.04.13
1，从url到得到html的详细过程
浏览器根据dns服务器得到域名的ip地址
