web前端高级JavaScript - 关于面向对象的一些面试题

傷城~ 2022-12-20 12:46 204阅读 0赞

  • 1.下面代码运行的结果

    //1. 答案： 0 30
    function fun(){ 

    1. this.a=0;
    2. this.b=function(){ 
    3.     alert(this.a);
    4. }

    }
    fun.prototype={ 

    1. b:function(){ 
    2.     this.a=20;
    3.     alert(this.a);
    4. },
    5. c:function(){ 
    6.     this.a=30;
    7.     alert(this.a)
    8. }

    }
    var my_fun=new fun();
    my_fun.b(); // 0
    my_fun.c();// 30

  • 2.写出下面代码执行输出的结果

    // 2.答案：’Tomundefinedjoin’
    function C1(name) { 

    1. if (name) { 
    2.     this.name = name;
    3. }

    }
    function C2(name) { 

    1. this.name = name;

    }
    function C3(name) { 

    1. this.name = name || 'join';

    }
    C1.prototype.name = ‘Tom’;
    C2.prototype.name = ‘Tom’;
    C3.prototype.name = ‘Tom’;
    alert((new C1().name) + (new C2().name) + (new C3().name));//‘Tomundefinedjoin’
    //(new C1().name)没有传递参数，所以没有私有name属性，取原型上的公有name属性
    //(new C2().name)没有传递参数，默认值为undefined，取私有name属性值为undefined
    //(new C3().name)没有传递参数，默认值为undefined,取私有name属性，如果值为undefined则取值join

  • 3.下面代码运行的结果？

    //3. 答案：
    // 1 undefined
    // ƒ () {this.a = 3;}
    // false true true
    // ƒ () {this.a = 2;}
    function Fn() { 

    1. let a = 1;
    2. this.a = a;

    }
    Fn.prototype.say = function () { 

    1. this.a = 2;

    }
    Fn.prototype = new Fn;
    let f1 = new Fn;

    Fn.prototype.b = function () { 

    1. this.a = 3;

    };
    console.log(f1.a);//1
    console.log(f1.prototype);//undefined
    console.log(f1.b);//ƒ () {this.a = 3;}
    console.log(f1.hasOwnProperty(‘b’));//false
    console.log(‘b’ in f1);//true
    console.log(f1.constructor == Fn);//true
    console.log(f1.say);//ƒ () {this.a = 2;}

  • 4.写出下面代码执行输出的结果

    // 4.答案： 2 4 1 1 2 3 3 3
    function Foo() { 

    1. getName = function () { 
    2.     console.log(1);
    3. };
    4. return this;

    }
    Foo.getName = function () { 

    1. console.log(2);

    };
    Foo.prototype.getName = function () { 

    1. console.log(3);

    };
    var getName = function () { 

    1. console.log(4);

    };
    function getName() { 

    1. console.log(5);

    }
    Foo.getName();//2
    getName();//4
    Foo().getName();//1
    getName();//1
    new Foo.getName();//2
    (new Foo).getName();//3
    new Foo().getName();//3
    new new Foo().getName();//3

  • 5.完成如下的需求

    //5. 答案：
    Number.prototype.plus = function(num){ 

    1. num = Number(num);
    2. if (isNaN(num)) { 
    3.     throw new TypeError(`${ num}不是一个入有效数字`);
    4. }
    5. return    this + num

    }
    Number.prototype.minus = function(num){ 

    1. num = Number(num);
    2. if (isNaN(num)) { 
    3.     throw new TypeError(`${ num}不是一个入有效数字`);
    4. }
    5. return this - num;

    }
    let n = 10;
    let m = n.plus(10).minus(5);
    console.log(m);//=>15（10+10-5）

  • 6.实现如下需求

    // 6. 答案：
    / 编写queryURLParams方法实现如下的效果（至少两种方案） */
    let url=”http://www.zhufengpeixun.cn/?lx=1&from=wx#video“;
    console.log(url.queryURLParams(“from”)); //=>”wx”
    console.log(url.queryURLParams(“_HASH”)); //=>”video”
    //方案一：正则表达式
    String.prototype.queryURLParams = function queryURLParams(key){ 

    1. let reg = /\?([^&]+)\&(.*)\#(.*)/
    2. let res = reg.exec(this);
    3. let obj = { };
    4. if(res){ 
    5.     obj[res[1].split('=')[0]] = res[1].split('=')[1]'
    6.     let params = res[2].split('&');
    7.     params.forEach(item=>{ 
    8.         obj[item.split('=')[0]]=item.split('=')[1]
    9.     });
    10.     obj["_HASH"] = res[3];
    11.     return obj[key];
    12. }
    13. return undefined;

    }
    //方案二：字符串截取
    String.prototype.queryURLParams = function queryURLParams(key){ 

    1. let params = url.split('?')[1];
    2. let hasIndex = params.indexOf('#');
    3. let hash = params.substr(hashIndex + 1);
    4. let arrParams = params.substr(0, hashIndex).split('&');
    5. let obj = { };
    6. obj["_HASH"] = hash;
    7. arrParams.forEach(item=>{ 
    8.     obj[item.split('=')[0]]=item.split('=')[1]
    9. });
    10. return obj[key]

    }

  • 7.基于ES6中的class重构下面的代码

    function Modal(x,y){ 

    1. this.x=x;
    2. this.y=y;

    }
    Modal.prototype.z=10;
    Modal.prototype.getX=function(){ 

    1. console.log(this.x);

    }
    Modal.prototype.getY=function(){ 

    1. console.log(this.y);

    }
    Modal.n=200;
    Modal.setNumber=function(n){ 

    1. this.n=n;

    };
    let m = new Model(10,20);

    //========答案========
    class Modal{ 

    1. constructor(x, y){ 
    2.     this.x = x;
    3.     this.y = y;
    4. }
    5. getX(){ 
    6.     console.log(this.x);
    7. }
    8. getY(){ 
    9.     console.log(this.y);
    10. }
    11. static n = 200;
    12. static setNumber(){ 
    13.     this.n = n;
    14. }

    }
    Modal.prototype.z = 10;

  • 8.代码输出的结果

    //8. 答案： {2:1,3:2,length:4,push:f push()}
    let obj = { 

    1. 2: 3,
    2. 3: 4,
    3. length: 2,
    4. push: Array.prototype.push

    }
    obj.push(1);
    obj.push(2);
    console.log(obj);
    // {2:1,3:2,length:4,push:f push()}

  • 9.a等于什么值会让下面条件成立

    //答案：
    var a = ?;
    if (a == 1 && a == 2 && a == 3) { 

    1. console.log('OK');

    }

    //方案一：
    a = { 

    1. i: 0,
    2. toString:function(){ 
    3.     return ++i;
    4. }

    }

    //方案二：
    a = [1,2,3]
    a.toString = a.shift;

    //方案三
    var i = 0;
    Object.defineProperty(window, ‘a’，{ 

    1. get:function(){ 
    2.     return ++i;
    3. }

    });

  • 10.实现如下需求

    let utils = (function(){ 

    1. /* * toArray：转换为数组的方法 * @params * 不固定数量，不固定类型 * @return * [Array] 返回的处理后的新数组 * by zhufengpeixun on 2020 */
    2. function toArray(){ 
    3.     //=>实现你的代码（多种办法实现） 
    4. }
    6. return { 
    7.     toArray
    8. };

    })();
    let ary = utils.toArray(10,20,30); //=>[10,20,30]
    ary = utils.toArray(‘A’,10,20,30); //=>[‘A’,10,20,30]

    //方案一：
    function toArray(…params){ 

    1. return [...params]

    }
    //方案二：
    function toArray(){ 

    1. return [].slice.call(arguments);

    }

    //方案三：
    function toArray(){ 

    1. let arr = [];
    2. for(let i = 0; i < arguments.length; i++){ 
    3.     arr.push(arguments[i]);
    4. }
    5. return arr;

    }

  • 11.对象(数组)的深克隆和浅克隆（头条）

    //=>浅克隆：只复制对象或者数组的第一级内容
    //数组浅克隆
    let arr = [];
    //方案一
    let newArr = arr.slice();
    //方案二：
    newArr = […arr]
    //普通对象浅克隆
    function shallowClone(obj){ 

    1. if(typeof obj == null) return null;
    2. if(typeof obj !== 'object') return obj;
    3. if(obj instanceof Date) return new Date(obj);
    4. if(obj instanceof RegExp) return new RegExp(obj);
    5. let newobj = { };
    6. for(let key in obj){ 
    7.     if(obj.hasOwnProperty(key)){ 
    8.         newObj[key] = obj[key];
    9.     }
    10. }
    11. return newObj;

    }
    //=>深克隆：克隆后数组的每一级都和原始数组没有关联
    function deepClone(obj){ 

    1. if(typeof obj == null) return null;
    2. if(typeof obj !== 'object') return obj;
    3. if(obj instanceof Date) return new Date(obj);
    4. if(obj instanceof RegExp) return new RegExp(obj);
    5. let newobj = { };
    6. for(let key in obj){ 
    7.     if(obj.hasOwnProperty(key)){ 
    8.         newObj[key] = deepClone(obj[key]);
    9.     }
    10. }
    11. return newObj;

    }
    //那么请说出，浅克隆都怎么去实现，如何实现深度克隆
    let obj = { 

    1. a: 100,
    2. b: [10, 20, 30],
    3. c: { 
    4.     x: 10
    5. },
    6. d: /^\d+$/

    };

    let arr = [10, [100, 200], { 

    1. x: 10,
    2. y: 20

    }];

  • 12.已知基于 instanceof 可以实现检测：实例是否属于某个类，现在需要自己编写这样的一个方法，实现出 instanceof 的效果

    //=>example：要检测的实例
    //=>classFunc:要检测的类
    function instance_of(example, classFunc) { 

    1. if(example== null) return false;
    2.    if(typeof example !== 'object') return false;
    3.    if(typeof classFunc !== 'function') throw new TypeError(`${ classFunc}must be a function`);
    4.    let prototype = Object.getPrototypeOf(example);
    5.    while(prototype){ 
    6.        if (prototype==null) return false;
    7.        if(prototype === classFunc.prototype)
    8.        { 
    9.            return true;
    10.        }
    11.        prototype = Object.getPrototypeOf(prototype);
    12.    }
    13.    return false;

    }
    let res = instance_of([12,23],Array);
    console.log(res); //=>true

附加题（偏难）

  • 1.实现如下需求

    //=>编写toType方法，实现数据类型检测
    function toType( obj ) {
    //完成你的代码

    1.    let mapping = { };
    2. ["Number","String","Boolean","Null","Undefined","Symbol","BigInt","Date","RegExp","Function","GeneratorFunction","Array","Object"].forEach(function(item){ 
    3.     mapping[`[object ${ item}]`] = item.toLowerCase();
    4. });
    5. let res = Object.prototype.toString.call(obj);
    6. return mapping[res];

    }
    console.log(toType(1)); //=>”number”
    console.log(toType(NaN)); //=>”number”
    console.log(toType([])); //=>”array”
    console.log(toType(/^\d+$/)); //=>”regexp”
    console.log(toType({ })); //=>”object”

  • 2.完成如下需求

    ~function(){ 

    1. function change(){ 
    2.     //=>实现你的代码
    3.     if(arguments.length === 0) return undefined;
    4.     let obj = arguments[0];
    5.     let params = [].slice.call(arguments, 1);
    6.     obj = this.apply(obj, params);
    7.     obj.name = 'Alibaba';
    8.     return obj;
    9. };
    11. Function.prototype.change=change;

    }();
    let obj = { name:’zhufeng’};
    function func(x,y){ 

    1. this.total=x+y;
    2. return this;

    }
    let res = func.change(obj,100,200);
    //res => {name:’Alibaba’,total:300}

  • 3.完成如下需求

    ~function(){ 

    1. //=>bind方法在IE6~8中不兼容，接下来我们自己基于原生JS实现这个方法
    2. function bind(obj, ...params){ 
    3.     let that = this;
    4.     return function(...args){ 
    5.         params = params.concat(args);
    6.         return that.call(obj, ...params)
    7.     }
    8. };
    9. Function.prototype.bind=bind;

    }();
    var obj = { name:’hello world’};
    function func(){ 

    1. console.log(this,arguments);
    2. //=>当点击BODY的时候，执行func方法，输出：obj [100,200,MouseEvent事件对象]

    }
    document.body.onclick = func.bind(obj,100,200);

  • 4.下面代码的输出结果？为什么？

    var name = ‘Hello World’;
    function A(x,y){ 

    1. var res=x+y;
    2. console.log(res,this.name);

    }
    function B(x,y){ 

    1. var res=x-y;
    2. console.log(res,this.name);

    }
    B.call(A,40,30);//10 ‘A’
    B.call.call.call(A,20,10);//
    Function.prototype.call(A,60,50);
    Function.prototype.call.call.call(A,80,70);

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，204人围观）

还没有评论，来说两句吧...

相关阅读