面试题小结

1.数据类型（简单）

数据类型和引用类型

2.null和undefined的区别

null表示变量定义了但是赋值为空，undefined表示变量声明了但是未赋值
例如变量被声明了但没有赋值，就等于undefined；函数没有返回值默认返回undefined；对象没有赋值的属性，该属性的值为undefined

        console.log(Number(null))
        console.log(Number(undefined))
        console.log(typeof (null))
        console.log(typeof (undefined))
        console.log(null == undefined)//强制转换为对象
        console.log(null === undefined)

3.面向对象

面向对象是基于万物皆对象这个哲学观点. 把一个对象抽象成类,具体上就是把一个对象的静态特征和动态特征抽象成属性和方法,也就是把一类事物的算法和数据结构封装在一个类之中,程序就是多个对象和互相之间的通信组成的.

封装就是将一类事物的属性和行为抽象成一个类，使其属性私有化，行为公开化，提高了数据的隐秘性的同时，使代码模块化。这样做使得代码的复用性更高。
继承则是进一步将一类事物共有的属性和行为抽象成一个父类，而每一个子类是一个特殊的父类–有父类的行为和属性，也有自己特有的行为和属性。这样做扩展了已存在的代码块，进一步提高了代码的复用性。
如果说封装和继承是为了使代码重用，那么多态则是为了实现接口重用。多态的一大作用就是为了解耦–为了解除父子类继承的耦合度。如果说继承中父子类的关系式IS-A的关系，那么接口和实现类之之间的关系式HAS-A。简单来说，多态就是允许父类引用(或接口)指向子类(或实现类)对象。很多的设计模式都是基于面向对象的多态性设计的。
面向对象具有封装性,继承性,多态性三大特性.封装隐蔽了对象内部不需要暴露的细节,使得内部细节的变动跟外界脱离,只依靠接口进行通信.封装性降低了编程的复杂性. 通过继承,使得新建一个类变得容易,一个类从派生类那里获得其非私有的方法和公用属性的繁琐工作交给了编译器. 而 继承和实现接口和运行时的类型绑定机制 所产生的多态,使得不同的类所产生的对象能够对相同的消息作出不同的反应,极大地提高了代码的通用性.

4.继承

5.react生命周期

1.继承（编程题）

function Car(count, speed, color) {
            this.count = count;
            this.speed = speed; // ?km/h
            this.color = color || "黑";
        }
        Car.prototype.run = function (time) {
            console.log(this.speed * time + "km/h");
        }

        function autoCar(opt) {
            Car.call(this, opt.count, opt.speed, opt.color);
            this.name = opt.name
        }
        autoCar.prototype = new Car();
        autoCar.prototype.bibi = function () {
            alert("滴")
        }

        let benchi = new autoCar({
            name: "奔驰",
            count: 4,
            speed: 180,
        })
        let baoma = new autoCar({
            name: "宝马",
            count: 4,
            speed: 260,
        })
        console.log(benchi)
        console.log(baoma)

        benchi.run(2)
        baoma.run(2)

2.css modules的理解，与css scoped的区别

css scoped使用

Scoped CSS的使用只需要在style标签上添加scoped即可
使用scoped的style，编译后其内的选择器会在其后添加自定义属性data-v-[str]，str为一串字符串，而使用该选择器的标签也会写上该自定义属性，而且只会修改当前组件中使用该选择器的标签，所以该选择器也就只能作用于当前组件

css modules使用

CSS Modules是一个用于模块化和组合CSS的系统，在vue-cli搭建的项目中可以直接使用，在webpack中可通过给css-loader传入modules:true来启用，在style标签上加上module，就使用了CSS Module了

// webpack.config.js
{
  module: {
    rules: [
      // ... 其它规则省略
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // 开启 CSS Modules
              modules: true,
              // 自定义生成的类名
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }
}

CSS Module应用的style标签上的样式，会被写在名为$style的计算属性上，在template中可以通过:class来应用该计算属性

Scoped CSS和CSS Modules的比较

相同点

• 两者都可以达到将样式只应用在当前组件，而不会影响到其他组件的效果，Scoped CSS是通过使用自定义属性，而CSS Modules是通过修改选择器名
• 两者都有办法将样式传递到子组件中，Scoped CSS是通过使用深度选择器，而CSS Modules是通过传递选择器名
• 在同一组件中使用多个style标签时，后面使用的style标签的样式会覆盖前面style标签的样式，即使CSS Modules中设置了不同的自定义名
• 两者在使用vue cli搭建的项目中都是开箱即可用
  不同点
  如上面所说的，达到只应用于当前组件和传递到子组件的方式不同
  CSS Modules可以通过JavaScript得到修改后的类名，而Scoped CSS不行
  CSS Modules在自己配置时需要将css-loader中的modules设置为true

3.readonly和disabled的区别

ReadOnly和Disabled的作用是使用户不能够更改表单域中的内容.
但是二者还是有着一些区别的：
1、Readonly只针对input(text/password)和textarea有效，而disabled对于所有的表单元素有效，包括select,radio,checkbox,button等。

2、在表单元素使用了disabled后，我们将表单以POST或者GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去

常用情况：
1、在某个表单中为用户预填了某个唯一识别代码，不允许用户改动，但是在提交时需要传递该值，此时将属性设置为readonly

2、当用户正式提交了表单后需要等待管理员的信息验证，不允许用户再更改表单中的数据，而是只能够查看，由于disabled的作用元素范围大，所以此时应该使用disabled，但同时应该注意的是要将submit button也disabled掉，否则只要用户按了这个按钮，如果在数据库操作页面中没有做完整性检测的话，数据库中的值会被清除。

3、在用户按了提交按钮后，利用javascript将提交按钮disabled掉，可防止在网络条件比较差的环境下，用户反复点击提交按钮导致数据冗余地存入数据库

4.函数中aguments是什么？是数组吗？怎样转为真正的数组？

arguments是个类数组，除了有实参所组成的类似数组以外，还有自己的属性，如callee，arguments.callee就是当前正在执行的这个函数的引用，它只在函数执行时才存在。因为在函数开始执行时，才会自动创建第一个变量arguments对象。

将arguments转换为真正的数组的方法

Array.prototype.slice.apply(arguments)(最优)
这是运行效率比较快的方法（看别人资料说的），为什么不是数组也可以，因为arguments对象有length属性，而这个方法会根据length属性,返回一个具有length长度的数组。若length属性不为number，则数组长度返回0；
所以其他对象只要有length属性也是可以的哟，如对象中有属性0,对应的就是arr[0],即属性为自然数的number就是对应的数组的下标，若该值大于长度，当然要割舍啦。

5.将url地址？后的参数转换为json对象

 let testUrl = "http://www.baidu.com/a/index.html?name=王大伟&age=18&sex=1";
        function parseUrl(url) {
            let result = {}
            url.slice(url.indexOf("?") + 1).split("&").forEach(item => {
                result[item.split("=")[0]] = item.split("=")[1]
            })
            return result;
        }
        console.log(parseUrl(testUrl))