web开发例子，html注释标签

2401_85158651

于 2024-07-05 00:14:41 发布

阅读量310

点赞数 5

分类专栏：资料搜公宗号文章标签：前端 html javascript

本文链接：https://blog.csdn.net/2401_85158651/article/details/140193306

版权

资料搜公宗号专栏收录该内容

11 篇文章 0 订阅

订阅专栏

instanceof通过原型链来判断数据类型的

p1 = new Person()

p1 instanceof Person // true

Object.prototype.toString.call()可以检测所有的数据类型，算是一个比较完美的方法了。

var obj={}

var arr=[]

console.log(Object.prototype.toString.call(obj)) //[object Object]

console.log(Object.prototype.toString.call(arr)) //[object Array]

深浅拷贝

浅拷贝

Object.assign() //es6的方法

Object.assign会合并对象生成一个新对象。如果对象的属性是普通类型改变之后新对象不会改变，如果是引用类型改变后新对象也会改变，所以Object.assign实际上还是浅拷贝。

var obj={aa:1,b:{item:‘45’}};

var newObj=Object.assign({},obj);

obj.aa=2;

obj.b.item=‘kk’;

console.log(newObj.aa); //1

console.log(newObj.b.item); //kk

深拷贝

JSON.parse(JSON.stringify(obj))

利用JSON.stringify(obj)将对象先转为json字符串，再JSON.parse(）转回为json对象可以实现深拷贝，这也是比较常用的一种方法。

用js实现一个深拷贝

其实深拷贝可以拆分成 2 步，浅拷贝 + 递归，浅拷贝时判断属性值是否是对象，如果是对象就进行递归操作，两个一结合就实现了深拷贝。

function cloneDeep(source) {

if (!isObject(source)) return source; // 非对象返回自身

var target = Array.isArray(source) ? [] : {};

for (var key in source) {

if (source.hasOwnProperty(i)) {

if (isObject(source[key])) {

target[key] = cloneDeep(source[key]); // 注意这里

} else {

target[key] = source[key];

}

return target;

}

function isObject(obj) {

return typeof obj === ‘object’ && obj != null;

}

二、作用域

变量声明提升

在 JavaScript 中，函数声明（function aa(){}）与变量声明（var）经常被 JavaScript 引擎隐式地提升到当前作用域的顶部。
函数声明的优先级高于变量，如果变量名跟函数名相同且未赋值，则函数声明会覆盖变量声明
声明语句中的赋值部分并不会被提升，只有变量的名称被提升

作用域链

因为函数的嵌套形成作用域的层级关系。当函数执行时，从当前作用域开始搜，没有找到的变量，会向上层作用域查找，直至全局函数，这就是作用域链。

在 JavaScript 中，作用域为 function(){}内的区域，称为函数作用域。
全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节

闭包

闭包的原理就是作用域链，比函数F内部有一个函数G，函数 G可以访问到函数F中的变量，那么函数G就是闭包。

function F() {

let a = 1

window.G = function () {

console.log(a)

}

F()

G() // 1

三、原型和继承

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 () => {

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() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

前端视频资料：
）方法改变了，指向的是banana，this.color就是banana.color =‘yellow’;