js 常见的原理面试题总结（一）

1： 手动实现一个call 函数

前置知识：

       （1）：首先了解Function 与function 的区别

// 调用构造函数并在每次解析的时候都会重新读取并创建一个新的函数对象
var fname= new Function('test', `console.log(${test})`);

（2）： 使用delete关键字可以删除对象的属性

var obj ={

name: 'xiaoc',

age: 12

}
console.log(obj);   // {name: 'xiaoc',age:12 } 
delete obj.age;     // 注意使用delete关键字可以删除对象的属性
console.log(obj);   //  {name: "xiaoc"}

（3）： 数组中的slice方法

var arr =[1,2,3,4,5,6,7];
// slice第一个参数是从数组的那个索引开始截取， 第二个参数是结束截取,  不修改原数组，返回新数组
console.log(arr.slice(2));  // [3,4,5,6,7]
console.log(arr.slice(2,4));  // [3,4]

// 注意splice 会修改原数组，如有删除则返回删除的项

下面是正式代码：

Function.prototype.mycall=function(context){
    //（node  环境下是global, 浏览器环境下是window）如果第一个参数是 null ,会报错TypeError: Cannot set property 'fn' of null，
    context= context||global;   
    var arr=[...arguments].slice(1);
    context.fn =this;
    var res=context.fn(...arr);   // 函数fn可能含有返回值
    delete context.fn;
    return res;
}

var obj ={
    name: "xiaomi",
    age: 12
}

function fn(a,b,c,d){
    console.log(this);    // 打印出调用fn 函数的this 
    console.log(a,b,c,d);
    return "测试返回结果";
}

var res=fn.mycall(null, 12,3,4,6)  // Object[global]  12 3 4 6
console.log(res);    // 打印函数的返回值： 测试返回结果

2： 手动写一个apply 方法

// 和call 方法的区别就是, 参数是一个数组
Function.prototype.myapply=function(context){
    context= context||global;
    var arr =arguments[1];
    context.fn=this;
    var res=context.fn(...arr);
    delete context.fn;
    return res;
}

var obj ={
    name: "zhangsan",
    age:13
}

function test(a,b,c,d){
    console.log(a,b,c,d);
    return "apply 打印";
}

var res= test.myapply(obj,[3,4,5,6,100]);   //  3 4 5 6
console.log(res);   // apply 打印

3： 手写一个bind 函数

// 和call 的区别是 bind是不会自动调用的
Function.prototype.mybind=function(context){
    context= context||global;
    var arr= [...arguments].slice(1);
    context.fn = this;
    
    return function(){
        var res=context.fn(...arr);
        delete context.fn;
        return res;
    }
}

var obj={
    name: "xiaowang",
    age:21
}

function test(a,b,c,d){
    console.log(this);
    console.log(a,b,c,d);
    return "bind 测试打印";
}

var res=test.mybind(obj,4,2 ,5,6)();
console.log(res);

4： 实现typeof 原理

前置知识点：

（1）： 七种基本数据类型的理解（number, string, boolean, object, function, undefined, symbol）

// 此处没有symbol基本数据类型，后面再单独说
var obj ={name: "aem"};
var arr=[1,2,3,45];
var fn=function(){}
var a=10;
var b="svd";
var c= true;

// 对于数组和对象的类型都是object
console.log(typeof obj);   //  object
console.log(typeof arr);   //  object
console.log(typeof null);  //  object

console.log(typeof fn);    //  function

console.log(typeof a);     //  number
console.log(typeof b);     //  string 
console.log(typeof c);     //  boolean

（2）： 常用的js内置对象

// 使用以下内置构造函数生成 对应的对象
var d= new String("abcdefg");
va