常看：前端面试题搂搂

背藏玫瑰

已于 2022-10-27 19:49:45 修改

阅读量183

点赞数

文章标签：前端 javascript vue.js

于 2022-09-21 17:39:36 首次发布

本文链接：https://blog.csdn.net/weixin_41127362/article/details/126508796

版权

<! DOCTYPE html> H5

DOCTYPE 是document type缩写，不是html标签内容，没有结束标签，是标记性语言的文本类型声明，表示文档时已什么版本编写

作用:

声明文档的解析类型(document.compatModel),避免浏览器的怪异模式。

其他版本申明使用 (是否使用Frame （框架集）是否展示font元素)

HTML 4.01 Strict：
该DTD包含所，有的HTML元素和属性，但不含展示性的和弃用元素(比如 font)，不允许框架集(Framesets)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional：
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
原文链接：https://blog.csdn.net/TZOF_/article/details/113030655

meta

meta是html语言head区的一个辅助性标签
作用：

meta标签的作用有：搜索引擎优化(SEO)，定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！

charset="utf-8"
(国际通用 ASCII)
charset=" gb2312"

GB2312标准共收录6763个汉字，其中一级汉字3755个，二级汉字3008个；同时，GB2312收录了包括拉丁字母、希腊字母、日文平假名及片假名字母、俄罗斯语西里尔字母在内的682个全形字符。

meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；

meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；

meta标签的charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；

meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；

meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；

meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；

name:
        name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="参数"content="具体的参数值">。
（1）Keywords(关键字)　
        说明：keywords用来告诉搜索引擎你网页的关键字是什么
（2）B、description(网站内容描述)
        说明：description用来告诉搜索引擎你的网站主要内容。
（3）C、robots(机器人向导)
        说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
（4）D、author(作者)
        说明：标注网页的作者
http-equiv：

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 meta标签的http-equiv属性语法格式是：

<metahttp-equiv="参数"content="参数变量值">；
（1）A、Expires(期限)
        说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
        用法：<metahttp-equiv="expires"content="Fri,12Jan200118:18:18GMT">
        注意：必须使用GMT的时间格式。
（2）B、Pragma(cache模式)

        说明：禁止浏览器从本地计算机的缓存中访问页面内容。

        用法：<meta http-equiv="Pragma"content="no-cache">

        注意：这样设定，访问者将无法脱机浏览。

（3）C、Refresh(刷新)

        说明：自动刷新并指向新页面。

        用法：<meta http-equiv="Refresh" content="2;URL=http://www.jb51.net">(注意后面的引号，分别在秒数的前面和网址

的后面)

        注意：其中的2是指停留2秒钟后自动刷新到URL网址。

（4）D、Set-Cookie(cookie设定)

        说明：如果网页过期，那么存盘的cookie将被删除。

        用法：<metahttp-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">

        注意：必须使用GMT的时间格式。
（5）E、Window-target(显示窗口的设定)

        说明：强制页面在当前窗口以独立页面显示。

        用法：<metahttp-equiv="Window-target"content="_top">

        注意：用来防止别人在框架里调用自己的页面。

（6）F、content-Type(显示字符集的设定)

        说明：设定页面使用的字符集。

        用法：<meta http-equiv="content-Type" content="text/html;charset=gb2312">

（7）G、content-Language(显示语言的设定)

        用法：<meta http-equiv="Content-Language" content="zh-cn"/>
（8） H、Cache-Control指定请求和响应遵循的缓存机制。

        Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、on ly-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must- revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下

        Public指示响应可被任何缓存区缓存

        Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效

        no-cache指示请求或响应消息不能缓存

        no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

        max-age指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应

        min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应

        max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

详情看这里：
meta标签详解_代码无常的博客-CSDN博客

//1.依次输出什么？
//2.整个过程中产生了几个执行上下文？
console.log('global begin' + i);
var i = 1
foo(1)
function foo(i) {
    if(i === 4) {
        return
    }
    console.log('foo() begin:' + i);
    foo(i + 1)
    console.log('foo() end:' +  i);
}
console.log('global end:' + i);
依次输出：
global begin undefined
foo() begin: 1
foo() begin: 2
foo() begin: 3

foo() end: 3
foo() end: 2
foo() end: 1

执行上下文： 5个
foo 1~4个
window 1个

global end: 1
————————————————

如果不太了解什么是执行上下文，可以点击查看我的这篇博客什么是执行上下文

1. 区别1
全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时

全局执行上下文环境是在全局作用域确定之后，js代码马上执行之前创建的

函数执行上下文是在调用函数时，执行函数体代码之前创建

2. 区别2
作用域是静态的。只要函数定义好了就一直存在，且不会再变化

执行上下文环境是动态的，调用函数时创建，函数调用结束时上下文环境就会被释放

3. 联系
执行上下文环境(对象)是从属于所在的作用域
全局上下文环境==>对应全局作用域
函数上下文环境==>对应的函数使用域
4.作用域链

function Afun() {
this.aName ="这是函数A"
this.atype = 'a'
this.Aage = 10
}
function Bfun() {
this.bName ="这是函数b"
this.btype = 'b'
this.Bage = 20
}
function Cfun (){
this.cName ="这是函数C"
this.ctype = 'c'
this.Cage = 30
}
function Dfun() {
this.dName ="这是函数D"
this.ctype = 'D'
this.Cage = 40
}
Bfun.prototype = new Afun()
Cfun.prototype = new Bfun()
Dfun.prototype = new Cfun()
dfunObject = new Dfun()

dfunObject.constructor 是什么？ Afun函数
dfunObject.constructor === Cfun.prototype.constructor true
说明在原型链的构造器的最顶端是人为构造的最顶端函数（Afun）
（系统顶端为Object）
constructor 是prototype上的属性
所以有
dfunObject.__proto__ == DfunObejct.prototype
dfunObject.__proto__.constructor == DfunObejct.prototype.constructor
dfunObject.constructor == DfunObejct.prototype.constructor

dfunObject.constructor == cfunObejct.__proto__.constructor

(cfunObejct = new CfunObject)
dfunObject.constructor => AfunTructor

js中this指向问题
默认绑定
var a = "global";
function foo() {
	var a = "foo";
	console.log(this.a);
}
foo();	//global
隐私绑定
var a = "global";
var obj = {
	a: "obj",
	foo: function() {
		console.log(this.a);
	}
}

obj.foo();	//obj
隐私丢失
var a = "global";
var obj = {
	a: "obj",
	foo: function() {
		function foo1() {
			console.log(this.a);
		}
		foo1();
	}
}
obj.foo();	//global
这里的函数调用比上面的程序多了一层函数的嵌套，绑定的 this 就发生了变化，变成了 winodw 全局对象（非严格模式下）
和变量不同，关键字 this 没有作用域的限制，嵌套的函数不会从调用它的函数中继承 this。如果嵌套函数作为方法（method）调用，其 this 的值指向调用它的对象。如果嵌套函数作为函数（function）调用，其 this 值不是全局对象（非严格模式下）就是 undefined （严格模式下）。
解决：箭头函数、保留上级的作用域const self = this

显示绑定
obj.foo.apply(obj2);
obj.foo.call(obj2);
obj.foo.bind(obj2)();

new 绑定
函数通过 new 调用后，若函数没有返回其他函数，那么自动返回一个新对象，this 绑定在这个新对象上。

一般来说，this 绑定的优先级： new > 显示绑定 > 隐式绑定 > 默认绑定。

async function test(){
}
带async关键字的函数，是声明异步函数，返回值是promise对象，如果async关键字函数返回的不是promise，会自动用Promise.resolve()包装。

async 微任务优先级高》 setTimeout 宏任务

输出什么
var obj = { a: 1, b: 2 };
Object.setPrototypeOf(obj, {c: 3});
Object.defineProperty(obj, 'd', { value: 4, enumerable: false });

// what properties will be printed when we run the for-in loop?
for(let prop in obj) {
    console.log(prop);
}  
考点 Object.setPrototypeOf()、Object.defineProperty()
将obj原型设置{c:3}
for in 可以遍历原型上的属性

输出什么

   console.log("1")

    async function test() {
        let a = 2
        return
    }
    function b() {
        const bPromise = new Promise((resolve, reject) => {
            console.log("resolve")
            resolve('2')

        })
        return bPromise
    }
    const c = b().then((r) => {
        console.log(r)
    })
    console.log('cb')
 
    const res = test().then((r) => {
        console.log(typeof r)
    })

    console.log('over')

同步任务-》异步任务（微任务=》宏任务）
typeof 类型监测

实现上面效果
考点：flaot shape-outside: circle();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .content {
        width: 400px;
    }

    .avatar {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid #f0f0f0;
        float: left;
        shape-outside: circle();
    }

    img {
        width: 100%;
        height: 100%;
    }

    .text {
        background: #f0f0f0;
    }
</style>

<body>
    <div class="content">
        <div class="avatar">
            <img src="http://sucai.suoluomei.cn/sucai_zs/images/20191126150939-avatar.jpg">
        </div>
        <div class="text">
            豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。
            时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
            披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津， </div>
</body>

</html>

const promise = new Promise((resolve, reject) => {
resolve('success1');
reject('error');
resolve('success2');
});
promise.then((res) => {
console.log('then:', res);
}).catch((err) => {
console.log('catch:', err);
})
结果 then: success1
Promise的状态在发生变化之后，就不会再发生变化

Promise.resolve(1)
.then(2)
.then(Promise.resolve(3))
.then(console.log)
结果： 1

Promise.resolve方法的参数如果是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为resolved，Promise.resolve方法的参数，会同时传给回调函数。

then方法接受的参数是函数，而如果传递的并非是一个函数，它实际上会将其解释为then(null)，这就会导致前一个Promise的结果会传递下面。

Promise.resolve().then(() => {
return new Error('error!!!')
}).then(res => {
console.log("then: ", res)
}).catch(err => {
console.log("catch: ", err)
})
结果 "then: " "Error: error!!!"
return new Error('error!!!')也被包裹成了return Promise.resolve(new Error('error!!!'))

const promise = Promise.resolve().then(() => {
return promise;
})
promise.catch(console.err)

输出:
Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>
这里其实是一个坑，.then 或 .catch 返回的值不能是 promise 本身，否则会造成死循环。

Promise.resolve(1)
.then(2)
.then(Promise.resolve(3))
.then(console.log)
结果
1

实际上只需要记住一个原则：.then 或.catch 的参数期望是函数，传入非函数则会发生值透传。

第一个then和第二个then中传入的都不是函数，一个是数字，一个是对象，因此发生了透传，将resolve(1) 的值直接传到最后一个then里，直接打印出1。

Promise.reject('err!!!')
.then((res) => {
console.log('success', res)
}, (err) => {
console.log('error', err)
}).catch(err => {
console.log('catch', err)
})
结果
error err!!!!

.then函数中的两个参数：

第一个参数是用来处理Promise成功的函数
第二个则是处理失败的函数

async function async1 () {
await async2();
console.log('async1');
return 'async1 success'
}
async function async2 () {
return new Promise((resolve, reject) => {
console.log('async2')
reject('error')
})
}
async1().then(res => console.log(res))
结果
async2
Uncaught (in promise) error
如果async函数中抛出了错误，就会终止错误结果，不会继续向下执行
可以用 catch 接受，继续向下执行
await Promise.reject('error!!!').catch(e => console.log(e))

var a = 10
var obj = {
a: 20,
say: () => {
console.log(this.a)
}
}
obj.say()

var anotherObj = { a: 30 }
obj.say.apply(anotherObj)
结果
10 10
箭头函数时不绑定this的，它的this来自原其父级所处的上下文，所以首先会打印全局中的 a 的值10。后面虽然让say方法指向了另外一个对象，但是仍不能改变箭头函数的特性，它的this仍然是指向全局的，所以依旧会输出10。

function a() {
console.log(this);
}
a.call(null);
结果

Window 对象
要注意的是，在严格模式中，null 就是 null，undefined 就是 undefined：

var obj = {
say: function() {
var f1 = () => {
console.log("1111", this);
}
f1();
},
pro: {
getPro:() => {
console.log(this);
}
}
}
var o = obj.say;
o();
obj.say();
obj.pro.getPro();

输出：

1111 window对象
1111 obj对象
window对象
（1）o()，o是在全局执行的，而f1是箭头函数，它是没有绑定this的，它的this指向其父级的this，其父级say方法的this指向的是全局作用域，所以会打印出window；
（2）obj.say()，谁调用say，say 的this就指向谁，所以此时this指向的是obj对象；
（3）obj.pro.getPro()，我们知道，箭头函数时不绑定this的，getPro处于pro中，而对象不构成单独的作用域，所以箭头的函数的this就指向了全局作用域window。

var myObject = {
foo: "bar",
func: function() {
var self = this;
console.log(this.foo);
console.log(self.foo);
(function() {
console.log(this.foo);
console.log(self.foo);
}());
}
};
myObject.func();
输出结果：
bar bar undefined bar

首先func是由myObject调用的，this指向myObject。又因为var self = this;所以self指向myObject。
这个立即执行匿名函数表达式是由window调用的，this指向window 。立即执行匿名函数的作用域处于myObject.func的作用域中，在这个作用域找不到self变量，沿着作用域链向上查找self变量，找到了指向 myObject对象的self。

var x = 3;
var y = 4;
var obj = {
x: 1,
y: 6,
getX: function() {
var x = 5;
return function() {
return this.x;
}();
},
getY: function() {
var y = 7;
return this.y;
}
}
console.log(obj.getX()) // 3
console.log(obj.getY()) // 6
输出结果：3 6

我们知道，匿名函数的this是指向全局对象的，所以this指向window，会打印出3；
getY是由obj调用的，所以其this指向的是obj对象，会打印出6。

function a(xx){
this.x = xx;
return this
};
var x = a(5);
var y = a(6);

console.log(x.x) // undefined
console.log(y.x) // 6
输出结果： undefined 6
因为 a(6) 把 window.x 赋值为 6 了，a(6).x 自然是 undefined

// a
function Foo () {
getName = function () {
console.log(1);
}
return this;
}
// b
Foo.getName = function () {
console.log(2);
}
// c
Foo.prototype.getName = function () {
console.log(3);
}
// d
var getName = function () {
console.log(4);
}
// e
function getName () {
console.log(5);
}

Foo.getName(); // 2
getName(); // 4
Foo().getName(); // 1
getName(); // 1
new Foo.getName(); // 2
new Foo().getName(); // 3
new new Foo().getName(); // 3
结果：
2 4 1 1 2 3 3

**Foo.getName()，**Foo为一个函数对象，对象都可以有属性，b 处定义Foo的getName属性为函数，输出2；
**getName()，**这里看d、e处，d为函数表达式，e为函数声明，两者区别在于变量提升，函数声明的 5 会被后边函数表达式的 4 覆盖；
**Foo().getName()，**这里要看a处，在Foo内部将全局的getName重新赋值为 console.log(1) 的函数，执行Foo()返回 this，这个this指向window，Foo().getName() 即为window.getName()，输出 1；
**getName()，**上面3中，全局的getName已经被重新赋值，所以这里依然输出 1；
**new Foo.getName()，**这里等价于 new (Foo.getName())，先执行 Foo.getName()，输出 2，然后new一个实例；
**new Foo().getName()，**这里等价于 (new Foo()).getName(), 先new一个Foo的实例，再执行这个实例的getName方法，但是这个实例本身没有这个方法，所以去原型链__protot__上边找，实例.protot === Foo.prototype，所以输出 3；
**new new Foo().getName()，**这里等价于new (new Foo().getName())，如上述6，先输出 3，然后new 一个 new Foo().getName() 的实例。

var F = function() {};
Object.prototype.a = function() {
console.log('a');
};
Function.prototype.b = function() {
console.log('b');
}
var f = new F();
f.a();
f.b();
F.a();
F.b()

输出：
a
Uncaught TypeError: f.b is not a function
a
b

f 并不是 Function 的实例，因为它本来就不是构造函数，调用的是 Function 原型链上的相关属性和方法，只能访问到 Object 原型链。所以 f.a() 输出 a ，而 f.b() 就报错了。
F 是个构造函数，而 F 是构造函数 Function 的一个实例。因为 F instanceof Object === true，F instanceof Function === true，由此可以得出结论：F 是 Object 和 Function 两个的实例，即 F 能访问到 a，也能访问到 b。所以 F.a() 输出 a ，F.b() 输出 b。

var A = {n: 4399};
var B = function(){this.n = 9999};
var C = function(){var n = 8888};
B.prototype = A;
C.prototype = A;
var b = new B();
var c = new C();
A.n++
console.log(b.n);
console.log(c.n);
输出结果：9999 4400

console.log(b.n)，在查找b.n是首先查找 b 对象自身有没有 n 属性，如果没有会去原型（prototype）上查找，当执行var b = new B()时，函数内部this.n=9999(此时this指向 b) 返回b对象，b对象有自身的n属性，所以返回 9999。
console.log(c.n)，同理，当执行var c = new C()时，c对象没有自身的n属性，向上查找，找到原型（prototype）上的 n 属性，因为 A.n++(此时对象A中的n为4400)，所以返回4400。