JS summary

• 变量的类型和计算
• 原型和原型链
• 作用域和闭包

• 异步和单线程

• typeof能判断哪些类型：undefined, strinig,’number’,boolean,symbol,function,object

• 何时使用=== 何时使用== 除了==null,其他都用===，因为==运算符 通过发生转换去相等
• 值类型和引用类型的区别
• 值类型 vs引用类型，堆栈模型，深拷贝
• typeof 运算符
• 类型转换， truly和falely变量
• 如何判断一个变量是不是数组 intanceof
• 首先一个建议的jquery，考虑插件和扩展性
• class的原型本质
• class和继承，结合手写jquery的示例来理解
• intanceof
• 原型和原型链
• this的不用应用场景
• 手写bind函数
• 实际开发中闭包的应用场景
• 十个a标签，弹出序号
• 作用域和自由变量
• 闭包：两种常见形式和自由变量查找规则（函数定义的地方查找）
• 异步和同步的区别
• 手写promise加载一个图片
• 单线程和异步，异步和同步的区别
• 前端异步的应用场景:网络请求和定时任务
• Promise解决callback hell

Promise

callback hell

//获取第一份数据
$.get(url1,(data1)=>{
    console.log(data1)
    //获取第二份数据
    $.get(url2,(data2)=>{
        console.log(data2)
        //获取第三份数据
        $.get(url3,(data3)=>{
            console.log(data3)
        })
    })
})

Asynchronous

题目：

• 同步和异步的区别是什么
• 手写用promise加载一张图片
• 前端使用异步的场景有哪些

//setTimeout 
console.log(1)
setTimeout(function(){
    console.log(2)
},1000)
console.log(3)
setTimeout(function(){
    console.log(4)
},0)
console.log(5)

closure闭包的应用

• 隐藏数据
• 做一个简单的cashe工具

console.log('cachedemo')
//闭包隐藏数据，只提供API
function createCache(){
    const data ={}//闭包中的数据，被隐藏，不被外界访问
    return {
        set:function (key,val){
            data[key]=val
        },
        get:function(key){
            return data[key]
        }
    }
}
const c = createCache()
c.set('a',100)
console.log(c.get('a'))

bind

function.prototype.bind1=function(){
    //将参数解析为数组
    constargs = Array.prototype.slice.call(arguments)
    //获取this(取出数组第一项，数组剩余的就是传递的参数)
    const t = args.shift()
    const self = this //当前函数
    //返回一个函数
    return function () {
        //执行原函数，并返回结果
        retrun self.appy(t,args)
    }
}

this

• 作为普通函数
• 使用call apply bind（传入什么就返回什么）
• 作为对象方法被调用
• 在class方法中被调用（当前实例本身）
• 箭头函数（上一级作用域的定义）

this是在函数执行的时候确定，不是在函数定义的时候确定

function fn1(){
    console.log(this)
}
fn1();//window

fn1.call({x:100})// {x:100}
const fn2 = fn1.bind({x:200})
fn2() //{x:200}

作用域和闭包

• this的不用应用场景如何取值
• 手写bind函数
• 闭包在实际开发中的应用场景
• 创建10个a标签，点击时候弹出来对应的序号

Instanceof 原型链

Instance of 类型判断

victoria instanceof Student //true
victoria instanceof People  //true
victoria isntanceof Object  //true

[] instanceof Array //true
[] instanceof Object //true
{} instanceof Object //true

Sticktop

顾名思义，当元素靠近顶部时，自动固定在顶部。

常用场景
1.导航栏
2.字母列表

要实现导航吸顶效果，监听 scroll，然后设置导航的position：fixed

有一种属性：position:sticky