web前端高级JavaScript - 关于面向对象的一些面试题
1.下面代码运行的结果
//1. 答案: 0 30
function fun(){this.a=0;
this.b=function(){
alert(this.a);
}
}
fun.prototype={b:function(){
this.a=20;
alert(this.a);
},
c:function(){
this.a=30;
alert(this.a)
}
}
var my_fun=new fun();
my_fun.b(); // 0
my_fun.c();// 302.写出下面代码执行输出的结果
// 2.答案:’Tomundefinedjoin’
function C1(name) {if (name) {
this.name = name;
}
}
function C2(name) {this.name = name;
}
function C3(name) {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则取值join3.下面代码运行的结果?
//3. 答案:
// 1 undefined
// ƒ () {this.a = 3;}
// false true true
// ƒ () {this.a = 2;}
function Fn() {let a = 1;
this.a = a;
}
Fn.prototype.say = function () {this.a = 2;
}
Fn.prototype = new Fn;
let f1 = new Fn;Fn.prototype.b = function () {
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() {getName = function () {
console.log(1);
};
return this;
}
Foo.getName = function () {console.log(2);
};
Foo.prototype.getName = function () {console.log(3);
};
var getName = function () {console.log(4);
};
function getName() {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();//35.完成如下的需求
//5. 答案:
Number.prototype.plus = function(num){num = Number(num);
if (isNaN(num)) {
throw new TypeError(`${ num}不是一个入有效数字`);
}
return this + num
}
Number.prototype.minus = function(num){num = Number(num);
if (isNaN(num)) {
throw new TypeError(`${ num}不是一个入有效数字`);
}
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){let reg = /\?([^&]+)\&(.*)\#(.*)/
let res = reg.exec(this);
let obj = { };
if(res){
obj[res[1].split('=')[0]] = res[1].split('=')[1]'
let params = res[2].split('&');
params.forEach(item=>{
obj[item.split('=')[0]]=item.split('=')[1]
});
obj["_HASH"] = res[3];
return obj[key];
}
return undefined;
}
//方案二:字符串截取
String.prototype.queryURLParams = function queryURLParams(key){let params = url.split('?')[1];
let hasIndex = params.indexOf('#');
let hash = params.substr(hashIndex + 1);
let arrParams = params.substr(0, hashIndex).split('&');
let obj = { };
obj["_HASH"] = hash;
arrParams.forEach(item=>{
obj[item.split('=')[0]]=item.split('=')[1]
});
return obj[key]
}
7.基于ES6中的class重构下面的代码
function Modal(x,y){
this.x=x;
this.y=y;
}
Modal.prototype.z=10;
Modal.prototype.getX=function(){console.log(this.x);
}
Modal.prototype.getY=function(){console.log(this.y);
}
Modal.n=200;
Modal.setNumber=function(n){this.n=n;
};
let m = new Model(10,20);//========答案========
class Modal{constructor(x, y){
this.x = x;
this.y = y;
}
getX(){
console.log(this.x);
}
getY(){
console.log(this.y);
}
static n = 200;
static setNumber(){
this.n = n;
}
}
Modal.prototype.z = 10;8.代码输出的结果
//8. 答案: {2:1,3:2,length:4,push:f push()}
let obj = {2: 3,
3: 4,
length: 2,
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) {console.log('OK');
}
//方案一:
a = {i: 0,
toString:function(){
return ++i;
}
}
//方案二:
a = [1,2,3]
a.toString = a.shift;//方案三
var i = 0;
Object.defineProperty(window, ‘a’,{get:function(){
return ++i;
}
});
10.实现如下需求
let utils = (function(){
/* * toArray:转换为数组的方法 * @params * 不固定数量,不固定类型 * @return * [Array] 返回的处理后的新数组 * by zhufengpeixun on 2020 */
function toArray(){
//=>实现你的代码(多种办法实现)
}
return {
toArray
};
})();
let ary = utils.toArray(10,20,30); //=>[10,20,30]
ary = utils.toArray(‘A’,10,20,30); //=>[‘A’,10,20,30]//方案一:
function toArray(…params){return [...params]
}
//方案二:
function toArray(){return [].slice.call(arguments);
}
//方案三:
function toArray(){let arr = [];
for(let i = 0; i < arguments.length; i++){
arr.push(arguments[i]);
}
return arr;
}
11.对象(数组)的深克隆和浅克隆(头条)
//=>浅克隆:只复制对象或者数组的第一级内容
//数组浅克隆
let arr = [];
//方案一
let newArr = arr.slice();
//方案二:
newArr = […arr]
//普通对象浅克隆
function shallowClone(obj){if(typeof obj == null) return null;
if(typeof obj !== 'object') return obj;
if(obj instanceof Date) return new Date(obj);
if(obj instanceof RegExp) return new RegExp(obj);
let newobj = { };
for(let key in obj){
if(obj.hasOwnProperty(key)){
newObj[key] = obj[key];
}
}
return newObj;
}
//=>深克隆:克隆后数组的每一级都和原始数组没有关联
function deepClone(obj){if(typeof obj == null) return null;
if(typeof obj !== 'object') return obj;
if(obj instanceof Date) return new Date(obj);
if(obj instanceof RegExp) return new RegExp(obj);
let newobj = { };
for(let key in obj){
if(obj.hasOwnProperty(key)){
newObj[key] = deepClone(obj[key]);
}
}
return newObj;
}
//那么请说出,浅克隆都怎么去实现,如何实现深度克隆
let obj = {a: 100,
b: [10, 20, 30],
c: {
x: 10
},
d: /^\d+$/
};
let arr = [10, [100, 200], {
x: 10,
y: 20
}];
12.已知基于 instanceof 可以实现检测:实例是否属于某个类,现在需要自己编写这样的一个方法,实现出 instanceof 的效果
//=>example:要检测的实例
//=>classFunc:要检测的类
function instance_of(example, classFunc) {if(example== null) return false;
if(typeof example !== 'object') return false;
if(typeof classFunc !== 'function') throw new TypeError(`${ classFunc}must be a function`);
let prototype = Object.getPrototypeOf(example);
while(prototype){
if (prototype==null) return false;
if(prototype === classFunc.prototype)
{
return true;
}
prototype = Object.getPrototypeOf(prototype);
}
return false;
}
let res = instance_of([12,23],Array);
console.log(res); //=>true
附加题(偏难)
1.实现如下需求
//=>编写toType方法,实现数据类型检测
function toType( obj ) {
//完成你的代码let mapping = { };
["Number","String","Boolean","Null","Undefined","Symbol","BigInt","Date","RegExp","Function","GeneratorFunction","Array","Object"].forEach(function(item){
mapping[`[object ${ item}]`] = item.toLowerCase();
});
let res = Object.prototype.toString.call(obj);
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(){
function change(){
//=>实现你的代码
if(arguments.length === 0) return undefined;
let obj = arguments[0];
let params = [].slice.call(arguments, 1);
obj = this.apply(obj, params);
obj.name = 'Alibaba';
return obj;
};
Function.prototype.change=change;
}();
let obj = { name:’zhufeng’};
function func(x,y){this.total=x+y;
return this;
}
let res = func.change(obj,100,200);
//res => {name:’Alibaba’,total:300}3.完成如下需求
~function(){
//=>bind方法在IE6~8中不兼容,接下来我们自己基于原生JS实现这个方法
function bind(obj, ...params){
let that = this;
return function(...args){
params = params.concat(args);
return that.call(obj, ...params)
}
};
Function.prototype.bind=bind;
}();
var obj = { name:’hello world’};
function func(){console.log(this,arguments);
//=>当点击BODY的时候,执行func方法,输出:obj [100,200,MouseEvent事件对象]
}
document.body.onclick = func.bind(obj,100,200);4.下面代码的输出结果?为什么?
var name = ‘Hello World’;
function A(x,y){var res=x+y;
console.log(res,this.name);
}
function B(x,y){var res=x-y;
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);
还没有评论,来说两句吧...