上岸面试题

周小航.

已于 2022-08-08 22:09:47 修改

阅读量108

点赞数 1

文章标签：原型模式

于 2022-08-06 23:02:35 首次发布

本文链接：https://blog.csdn.net/weixin_64103049/article/details/126200437

版权

一、什么是原型原型链

原型：

var a = [1,2,3];
a.__proto__ === Array.prototype; // true

原型链：

function Parent(month){
    this.month = month;
}

var child = new Parent('Ann');

console.log(child.month); // Ann

console.log(child.father); // undefined

在child中查找某个属性时，会执行下面步骤：

二、什么是防抖节流（都为为了降低频率）

防抖：是指在事件触发n秒后再执行回调，如果在n秒内再次被触发，则重新计算时间。（就是在触发某个事件后，在下一次触发之前，中间的间隔时间如果超过设置的时间才会发送请求，一直触发就不会发送请求）最后一次事件操作即可，不在意过程，结果是最后一次的事件操作

主要应用场景有：
a、scroll事件滚动触发，
b、搜索框输入查询
c、表单验证
d、按钮提交事件
e、浏览器窗口缩放，resize事件

普通写法： 
var btn = document.querySelector('button')
    var tiem = null
    btn.onclick = function () {
        clearTimeout(tiem)
        tiem = setTimeout(() => {
            console.log('111');
        }, 1000)
    }

    //防抖还可以引用lodash插件  官方推荐使用 _ 命名
    //这个函数能够包装一个函数，传递一个函数进去，  debounce
    //他就会产生一个新的函数，并且这个函数就具备了防抖效果，底层就是用定时器
     var btn = document.querySelector('button')
     btn.onclick = _.debounce(function () {
     console.log('111');
    }, 1000)

节流：是指如果持续触发某个事件，则每隔n秒执行一次，降低频率，依然想让她频繁触发，只不过不那么频繁

主要应用场景：
a、DOM元素的拖拽功能实现
b、射击游戏类
c、计算鼠标移动的距离
d、监听scroll事件

普通写法  
var btn = document.querySelector('button')
    var flag = true
    btn.onclick = function () {
        if (flag) {
            flag = false
            console.log('111');

            setTimeout(() => {
                flag = true
            }, 1000)
        }
    }


// 使用lodash插件   throttle
 var btn = document.querySelector('button')
    btn.onclick = _.throttle(function () {
        console.log('111');
    }, 1000)

三、Js数据类型

基本数据类型（放在栈里）：Number、String、Boolean、Null、 Undefined、Symbol（ES6）

引用数据类型（放在堆里）：Array、function、 Object（在JS中除了基本数据类型以外的都是对象，数组是对象，函数是对象，正则表达式是对象）

四、如何检测数据类型(4 种)

1、typeof

        var str = '字符串类型';
        var num = 123;
        var bool = true;
        var bignum = BigInt("1234567890123456789012345678901234567890");
        var d = undefined;
        var n = null;
        var s = Symbol('foo');

        var obj = { a: 1 };
        var arr = [1, 2];
        
        console.log(typeof str);//String
        console.log(typeof num);//Number
        console.log(typeof bool);//Boolean
        console.log(typeof bignum);//BigInt
        console.log(typeof d);//Undefined
        console.log(typeof n);//Object
        console.log(typeof s);//Symbol
        console.log(typeof obj);//Object
        console.log(typeof arr);//Object

2、instanceof

        // 可以区分复杂数据类型
        console.log([] instanceof Array); //true
        console.log({} instanceof Object); //true

3、Object.prototype.toString.call()（对象原型链判断方法）

        console.log(Object.prototype.toString.call("123"))   // --------> [object String]
        console.log(Object.prototype.toString.call(123))     //--------> [object Number]
        console.log(Object.prototype.toString.call(true))    //--------> [object Boolean]
        console.log(Object.prototype.toString.call([1, 2, 3])) //--------> [object Array]
        console.log(Object.prototype.toString.call(null))      //--------> [object Null]
        console.log(Object.prototype.toString.call(undefined)) //--------> [object Undefined]
        console.log(Object.prototype.toString.call({ name: 'Hello' })) //--------> [object Object]
        console.log(Object.prototype.toString.call(function () { }))   //--------> [object Function]
        console.log(Object.prototype.toString.call(new Date()))        //--------> [object Date]
        console.log(Object.prototype.toString.call(/\d/))              //--------> [object RegExp]
        console.log(Object.prototype.toString.call(Symbol()))          //--------> [object Symbol]

4、constructor（用于引用数据类型）

        // 可以检测其构造函数
        console.log([].constructor === Array); // true
        console.log({}.constructor === Object);// true
        function Person() { }
        console.log(new Person().constructor === Person);// true

        // 原型链不会干扰
        console.log([].constructor === Object); // false