Webapi

1.简单说说事件委托

(1)什么是事件委托?

给父元素注册事件委托给里面的子元素来处理
(2)事件委托原理是什么?
原理就是事件冒泡
(3)事件委托的应用场景?
给动态新增元素 注册委托事件
(4)注意事项
this: 指向的是父元素
e.target: 指向得是点击触发事件的子元素

2.说下localStorage 与 sessionStorage的区别

(1)相同点

作用一致都是存储数据
都只能存储字符串类型的数据(上限是5MB)

(2)不同点

localStorage : 硬盘储存
sessionStorage : 内存储存

(3)原理是什么?

localStorage 本地永久型储存,关闭了页面数据还在,存在硬盘之中
sessionStorage 暂时性储存(临时存储) 储存于内存中关闭网页就消失了

(4)localStorage 与 sessionStorage如何储存引用类型数据(数据和对象)

使用JSON格式存储
- 存: 先转json,后存储 localStorage.setItem('user',JSON.stringify(obj))
- 取: 先取json,后转js let js = JSON.parse(localStorage.getItem('user'))

...
<body>
    <h1>localStorage存储对象类型</h1>
    <button class="btn1">存对象</button>
    <button class="btn2">取对象</button>
    <script>
        /* 
        1.localStorage和sessionStorage的区别？
            相同点： 作用相同，都是存储数据
            不同点：存储方式不同
                localStorage   : 硬盘存储（永久存储）
                    * 应用场景： 免登录
                sessionStorage : 内存存储 （临时存储）
                    * 应用场景： 页面间传值

        2.localStorage和sessionStorage在用的时候有什么注意点吗？
            * 只能存储字符串类型数据， 如果存储其他类型则编译器自动调用toString()转成字符串

        3.如何解决storage存储对象只能存储字符串问题？ （如何存储引用类型）
            * 使用json格式存储
                * 存： 先转json，后存储
                    * localStorage.setItem( 'user',JSON.stringify( obj ) )
                * 取：先取json，后转js 
                    * let js = JSON.parse( localStorage.getItem('user') ) 
        */

        let obj = {
            name: 'ikun',
            gfs: ['学生', '上课', '敲代码']
        }

        //存对象 : js->json
        document.querySelector('.btn1').onclick = function () {
            //1.先把js对象转成json格式
            // let json =  JSON.stringify( obj )
            //2.json存入localStorage
            // localStorage.setItem( 'user',json )

            localStorage.setItem('user', JSON.stringify(obj))
        }

        //取对象 : json->js
        document.querySelector('.btn2').onclick = function () {
            //1.先取出json格式字符串
            // let json = localStorage.getItem('user')
            //2.把取出来的json -> js
            // let js =  JSON.parse( json )

            let js = JSON.parse(localStorage.getItem('user'))
            console.log(js)

        }
    </script>
</body>

JS高级

1.简单说说new

(1)什么是new? new就是自定义构造函数
(2)new工作原理是什么?
- 1.创建一个空实例对象{}
- 2.这个this指向这个对象
- 3.给对象赋值
- 4.返回这个对象
例如:

function Person(name,hobby,age) {
// 1.创建一个空对象{}
// 2.this指向这个对象
// 3.给这个对象赋值
  this.name = name
  this.hobby = hobby
  this.age = age
  
// 4.返回这个对象
// return this
}

let obj = new Person('落花','浅唱',30)
console.log(obj) // Person {name: '落花',hobby: '浅唱',age: 30}

(3)new的应用场景
- 构造函数实例化为对象时
(4)注意事项构造函数内部的构造函数无效需要看情况:
return 值类型无效返回的还是new创建的实例对象
- 值类型: 字符串(String)、数字(Number)、布尔(Boolean)、对空Null()、未定义Undefined()
return 引用类型有效 new创建的实例对象会被覆盖
- 引用类型:对象(Object)、数组[Array]、函数(Function)

2.面向对象继承

(1)什么是面向对象继承?
- 继承是 面向对象软件技术当中的一个概念,与多态、封装工位面向对象的三个基本特征.继承可以使得子类具有父类的属性和方法或者重新定义、追加属性和方法等.
(2)js语言是通过什么技术实现面向对象继承的?
- 原型链
(3)原型链的原理是什么?
- 当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去prototype里找这个属性,这个prototype又会有自己的prototype,于是就这样一直找下去,也就是我们平时所说的链的概念.
(4)原型链的终点是什么?
- null
(5)面向对象继承应用场景
- 使用继承,需要考虑类与类之间是否存在is...a的关系,不能盲目使用继承
- is...a的关系,是谁的一种, 例如: 老师和学生是人的一种,那人就是父类,学生和老师就是子类

3.this的指向与调用方式的关系

this: 谁调用我我就指向谁
普通函数 函数名() :window
对象方法 对象名.方法名 : 对象
构造函数 new 函数名() :: new创建的实例对象

4. call apply 和 bind 的区别

共同点: 都可以改变this的指向

不同点: 1.call是注重传参 apply是对数组/伪数组传参

函数名.call(修改的this,参数1,参数2...)
函数名.apply(修改的this,数组/伪数组)

2.执行机制不同 call 和apply 会立即执行函数,bind不会立即执行 bind通常和定时器一起使用

1.函数名.bind(修改的this,参数1,参数2) // 这样写了会把对象的属性值固定死
上面的固定死后函数名(参数3,参数4)带入的实参无效此时对象的属性不变
2.bind会得到一个修改this后的新函数

因此函数名.bind(修改的this) 通常不加参数进去

前端 面试题持续更新中~~~