前端面试题搂搂

H5 

 

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

作用:

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

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

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

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

原文链接：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中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 
。 
（1）Keywords(关键字)　 
        说明：keywords用来告诉搜索引擎你网页的关键字是什么
（2）B、description(网站内容描述) 
        说明：description用来告诉搜索引擎你的网站主要内容。 
（3）C、robots(机器人向导) 
        说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。 
（4）D、author(作者) 
        说明：标注网页的作者 
http-equiv：

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

； 
（1）A、Expires(期限) 
        说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。 
        用法： 
        注意：必须使用GMT的时间格式。 
（2）B、Pragma(cache模式)    

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

        用法： 

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

（3）C、Refresh(刷新) 

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

        用法：(注意后面的引号，分别在秒数的前面和网址

的后面) 

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

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

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

        用法： 

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

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

        用法： 

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

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

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

        用法： 

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

        用法：
（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 #
这里其实是一个坑，.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
 

1. 首先func是由myObject调用的，this指向myObject。又因为var self = this;所以self指向myObject。
2. 这个立即执行匿名函数表达式是由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
 

1. 我们知道，匿名函数的this是指向全局对象的，所以this指向window，会打印出3；
2. 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

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

1. f 并不是 Function 的实例，因为它本来就不是构造函数，调用的是 Function 原型链上的相关属性和方法，只能访问到 Object 原型链。所以 f.a() 输出 a ，而 f.b() 就报错了。
2. 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

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