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. }
    5. return {
    6. toArray
    7. };

    })();
    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. };
    10. 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人围观)

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

相关阅读