- 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();
