【建议收藏】2021前端校招BATJ面试秘籍，为你保驾护航金三银四，直通大厂！

js 创建对象的几种方式

对象字面量的方

var obj={};

new一个构造函数

function Pel(){}
var p=new Pel();
p.name=“hu”;
p.age=“25”;
p.address=function(){
}

new一个内置对

var obj=new Object();

Object.create（）创建对象

var test = Object.create({x:1});

给大家留一道思考题，new Object() 、 Object.create(）、{}，这三种方式创建对象有什么区别。

JS 如何实现一个类

构造函数法

缺点：用到了 this 和 prototype，编写复杂，可读性差

function P(name, age){
this.name = name;
this.age= age;
}
P.prototype.sal= function(){

}
var pel= new P(“jj”, 1);
pel.sell()

ES6 语法糖 class

class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return ‘(’ + this.x + ', ’ + this.y + ‘)’;
}
}
var point = new Point(2, 3);

原型链

一句话解析什么是原型链

遍历一个实列的属性时，先遍历实列对象上的属性，再遍历它的原型对象，一直遍历到Object

任何一个类（函数）都有原型对象，原型对象至少有两个属性（constructor,proto）。constructor指向函数本身，proto指向父类原型对象。

函数上有一个prototype属性，指向原型对象，通过它可以访问原型对象

函数的实列可以直接访问原型对象(因为实列上有proto指向构造函数的原型对象)

function Dog(){} //类
var obj=new Dog(); //实列
obj.name=‘沪江’;
Dog.prototype.name=“旺财”;
Dog.prototype.eat=function(){
console.log(this.name);
};
console.log(Dog.prototype.name); //旺财
console.log(obj.prototype); //undefined,prototype是类上才有的，实列上没有
obj.eat(); //沪江（先遍历实列对象上的属性，再遍历它的原型对象）

继承

Js如何实现继承？

构造函数绑定：使用 call 或 apply 方法，将父对象的构造函数绑定在子对象上

function Cat(name,color){
Animal.apply(this, arguments);
this.name = name;
this.color = color;
}

实例继承：将子对象的 prototype 指向父对象的一个实例

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

拷贝继承：如果把父对象的所有属性和方法，拷贝进子对象

function extend(Child, Parent) {
var p = Parent.prototype;
var c = Child.prototype;
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
}

原型继承：将子对象的 prototype 指向父对象的 prototype

function extend(Child, Parent) {
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.uber = Parent.prototype;
}

ES6 语法糖 extends继承

class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 调用父类的constructor(x, y)
this.color = color;
}
toString() {
return this.color + ’ ’ + super.toString(); // 调用父类的toString()
}
}

❤️篇幅有限，更详细的内容点击我获取完整版pdf查看❤️

四、new和this

new 操作符具体干了什么？

当我们new一个数据的时候，new操作符到底做了什么？

• 首先是创建实例对象{}
• this 变量引用该对象，同时还继承了构造函数的原型
• 其次属性和方法被加入到 this 引用的对象中
• 并且新创建的对象由 this 所引用，最后隐式的返回 this

new的模拟实现

function objectFactory() {

var obj = new Object(),//从Object.prototype上克隆一个对象

Constructor = [].shift.call(arguments);//取得外部传入的构造器

var F=function(){};
F.prototype= Constructor.prototype;
obj=new F();//指向正确的原型

var ret = Constructor.apply(obj, arguments);//借用外部传入的构造器给obj设置属性

return typeof ret === ‘object’ ? ret : obj;//确保构造器总是返回一个对象

};

this 对象的理解

普通函数

• this 总是指向函数的直接调用者
• 如果有 new 关键字，this 指向 new 出来的实例对象
• 在事件中，this 指向触发这个事件的对象
• IE 下 attachEvent 中的 this 总是指向全局对象 Window
• 箭头函数中，函数体内的this对象，就是定义时所在作用域的对象，而不是使用时所在的作用域的对象。

function foo() {
console.log(this.a)
}
var a = 1
foo() //1

const obj = {
a: 2,
foo: foo
}
obj.foo() //2

const c = new foo() //undefined

• 对于直接调用 foo 来说，不管 foo 函数被放在了什么地方，this 一定是window
• 对于 obj.foo() 来说，我们只需要记住，谁调用了函数，谁就是 this，所以在这个场景下 foo 函数中的 this 就是 obj 对象
• 对于 new 的方式来说，this 被永远绑定在了 new出来的对象上，不会被任何方式改变 this

说完了以上几种情况，其实很多代码中的 this 应该就没什么问题了，下面让我们看看箭头函数中的 this

function a() {
return () => {
return () => {
console.log(this)
}
}
}
a()()() //Window

• 首先箭头函数其实是没有 this 的，箭头函数中的 this 只取决包裹箭头函数的第一个普通函数的 this。在这个例子中，因为包裹箭头函数的第一个普通函数是 a，所以此时的 this 是 window。另外对箭头函数使用 bind这类函数是无效的。

五、apply、call、bind

call、apply和bind是Function对象自带的三个方法，都是为了改变函数体内部 this 的指向。
apply 、 call 、bind 三者第一个参数都是 this 要指向的对象，也就是想指定的上下文；
apply 、 call 、bind 三者都可以利用后续参数传参；
bind 是返回对应 函数，便于稍后调用；apply 、call 则是立即调用 。

function fruits() {}

fruits.prototype = {
color: ‘red’,
say: function() {
console.log(this.color);
}
};

var apple = new fruits();

apple.say(); // red, 此时方法里面的this 指的是fruits

banana = {color: ‘yellow’};
apple.say.call(banana); //yellow,此时的this的指向已经通过call（）方法改变了，指向的是banana，this.color就是banana.color=‘yellow’;

apple.say.apply(banana);//yellow,同理，此时的this的指向已经通过apply（）方法改变了，指向的是banana，this.color就是banana.color =‘yellow’;

apple.say.apply(null); //undefined, null是window下的，此时，this 就指向了window ，但是window下并没有clolr这个属性，因此this.clolr就是window.color=undefined;

call 传入参数列表
apply 传入数组

var array1 = [12,‘foo’];
var array2 = [‘Doe’,100];

Array.prototype.push.call(array1, ‘Doe’,100)
Array.prototype.push.apply(array1, array2)

bind() 方法会创建一个 新函数，当调用这个新函数时，新函数会以创建它时传入 bind() 方法的第一个参数 作为 this，传入 bind() 方法的 第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

var bar = function(){
console.log(this.x);
};
var foo = {
x:3
};
bar(); // undefined
var func = bar.bind(foo);

func(); // 3

六、数据处理

数组去重

var arr=[‘12’,‘32’,‘89’,‘12’,‘12’,‘78’,‘12’,‘32’];
// 最简单数组去重法
function unique1(array){
var n = []; //一个新的临时数组
for(var i = 0; i < array.length; i++){ //遍历当前数组
if (n.indexOf(array[i]) == -1)
n.push(array[i]);
}
return n;
}
arr=unique1(arr);

排序

/**

• 按 sort 及 id 排序
• @param {Object} a
• @param {Object} b
  */
  function sortFun(a, b) {
  return a.sort - b.sort == 0 ? a.id - b.id : a.sort - b.sort
  };
  arr.sort(sortFun) //从小到大排序

递归求和

function add(num1,num2){
var num = num1+num2;
if(num2+1>100){
return num;
}else{
return add(num,num2+1)
}
}
var sum =add(1,2)

计算数组各项的重复次数

var arr=[‘胡将’,‘胡将’,‘hujiang’,‘胡将’,‘胡江’,‘hujiang’];
var obj={};
arr.sort(); //先排序
for(var i=0;i<arr.length;){
var con=0;
for(var j=i;j<arr.length;j++){
if(arr[i]===arr[j]){
con++
}
}
obj[arr[i]]=con;
i=i+con; //跳过重复的值
}
console.log(obj); //{ hujiang: 2, ‘胡将’: 3, ‘胡江’: 1 }

七、Event Loop

宏任务/微任务

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。