JS初级简答题

1.JS面向对象继承都有哪几种写法，请详细写出具体代码并附上上下文解释。
原型继承：
(1)子类.prototype = new 父类;
子类.prototype.constructor = 子类;
继承父类所有的属性和方法
(2)子类.prototype = 父类.prototype;
子类.prototype.constructor = 子类;
直接使用父类的原型对象来覆盖子类原型对象
构造函数继承：（父类在子类中使用）
call()：有多个参数，取决于父类实例化的时候需要传多少个参数
play()：有两个参数，第二个参数是数组

2.简述原型链。
实例化出来的对象的原型就是其构造函数的原型对象；
构造函数的原型对象的原型是Object的原型对象；
Object的原型对象的原型是null；
p1 是 Person() 实例化出来的对象
p1.proto 指向 Person.prototype；
Person.prototype.proto 指向 Object.prototype；
Object.prototype.proto 指向 null；

3.详细描述 _ _ proto _ _ 、prototype和constructor。
_ _ proto _ _ 原型（指向构造函数的原型对象）
prototype原型对象（指向object）
constructor (指向)构造函数
4.实现一个数组的深拷贝有几种写法，分别是什么？

1.for循环
let arr = [1,2,3,4,5];
let arr1 = [];
for(let i = 0;i < arr.length;i++){
    arr1[i]  = arr[i];
}
console.log(arr1);//[1, 2, 3, 4, 5]
2.concat();
let arr2 = [].concat(arr);
console.log(arr2);//[1, 2, 3, 4, 5]
3.   ...
let arr3 = [...arr];
let [...arr4] = arr;
console.log(arr3);//[1, 2, 3, 4, 5]
console.log(arr4);//[1, 2, 3, 4, 5]

5.canvas画圆方法里是什么？参数分别是什么？

ctx.arc();
6个参数
1.圆心x
2.圆心y
3.半径R
4.起始点和0度j夹角
5.结束点和0度夹角
6.bool(false默认值，顺时针；true逆时针）

6.简述let 和 var 的区别。
var:(1)存在变量的提升;(2)允许重复声明变量;
let:(1)不存在变量的提升;(2)不允许重复声明变量;(3)块级作用域（局部变量）
7.简述箭头函数和普通函数的区别。
1.箭头函数不能用于构造函数，普通函数可以；
2.箭头函数全都是匿名函数；
3.箭头函数不具有arguments对象，而每一个普通函数调用后都具有一个arguments对象；
4.this指向不同，箭头函数（我被定义时，定义的环境中this指向谁，我的this就指向谁），普通函数（谁调用我，我的this指向谁）；
8.在数组原型上补偿一个数组去重的方法。
9.canvas 编程：画一个边框10px颜色为黑色，填充颜色为红色，宽高100px的正菱形，菱形的中心店在屏幕正中间。
10.书写正则验证用户名，要求长度在6-16位，以字母开头，允许字母数字下划线。
/^[a-zA-Z]\w{5,15}$/g
11.请用工厂模式创建一个对象。

function fn1(name,sex,age){
    var obj = new Object();
    obj.name = name;
    obj.sex = sex;
    obj.age = age;
    return obj;
}

12.简述帧频率跟计时器的区别及原理，并用帧频率的方式实现一个小球移动。

 // 获取canvas标签
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    // 时间轴
    var timer = 0;
    var deg = Math.PI / 180;
    var x1 = 100;
    var y1 = 100;
    var y2 = 300;
    var r = 20;
    function run() {
        // 帧频率
        var a = requestAnimationFrame(run);
        // console.log(a);
        timer++;
        // console.log(timer);
        canvas.width = canvas.width;
        x1 += 2;
        ctx.beginPath();
        ctx.arc(x1, y1, r, 0, 360 * deg);
        ctx.strokeStyle = '2';
        ctx.fillStyle = 'red';
        ctx.fill();
        ctx.stroke();
    }
    run();

JS初级简答题

推荐阅读更多精彩内容