0424简历涉及知识点

最新推荐文章于 2022-11-14 14:53:59 发布

是郭橙橙呀

最新推荐文章于 2022-11-14 14:53:59 发布

阅读量253

点赞数

分类专栏： JS面经

本文链接：https://blog.csdn.net/qq_35482765/article/details/116100564

版权

JS面经专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.HTML、CSS基本知识，常用语句，可结合具体项目

2.h5页面布局//简易博客，电商站首页布局实战（Xmind）

重点:

4个

，不让其竖着显示，并列显示，横向页面分成四份（2，3，3，2）col1，col2，类似bootstrap栅格,block，左浮动，position：relative,min-height:1px;
.col-1:width:10% .col-8:width:80%;
搜索框与用户交互（input80%、button20%他们是行内块元素）：focus时产生向内投影；button交互，鼠标hover background颜色加深.
怎么让页面不铺满屏幕，缩放限定，居中约束，可在外层加一个div .container约束
container{
display: block;
max-width:1080px;
margin:0 auto;
}
css3中的过渡属性 transition, 为了让属性过渡没那么生硬。
box-shadow 增加投影，看起来更有质感

问题：
6. 内部子元素浮动导致父元素高度塌陷，本来父元素高度根据子元素来确定，但因为子元素float，父元素高度为0
解决方式：用css的伪类，class = “container clearf”
.clearf:after,
.clearf:before{
content:" "
display:block;
clear:both;
}

图片超出容器
img{
display: block;
max-width: 100%;
}
做导航条时，input、button是行内块元素，因为设置成inline-block,而行内块元素有默认间隙，容器宽度不够装就下掉
解决方法：用block+浮动，浏览器兼容更好。设置input,button{display：block；float: left;}

总结1.减少代码冗余，代码可重复利用：

.fl .fr .col-3
拷贝代码的时候想一想是元素的共性还是个性，可不可以合并

总结2.先整体布局后填充细节

总结3.好用的插件和网站

1.emmet 自动补全,emmet语法规则，提高代码书写效率
2.dummyimage生成图片
3.bootcdn 搜索normalize,可以提前避免一些页面布局的坑，比如浏览器默认样式margin 8px，我们希望margin置0,除了重置样式，还可以这样

请求报文（重点是格式与参数）
常用get（请求体为空）\post（请求体可以不为空）
···
行（请求类型+url路径+http版本）POST /s?ie=utf-8 HTTP/1.1
头（键值对） Host: atguigu.com
Cookie: name=guigu
Content-type: zpplication/x-www-form-urlencoded
空行
体 username=admin&password=admin
···
响应报文
···
行（协议版本+响应状态码+响应状态字符串） HTTP/1.1 200 OK
头 Content-Type: text/html;charset=utf-8
Content-length: 2048
Content-encoding: gzip
空行
体

		<html>
				<head>
				</head>
				<body>
					<h1>尚硅谷</h1>
				</body>
		</html>

响应状态码:
*404 找不到，服务器找不到请求的网页。
*403 forbidden 禁止。服务器拒绝请求
*401 未授权。请求要求身份认证，对于登录后请求的网页，服务器可能返回此响应
*500 内部错误
*200 OK
1xx(临时响应)通知信息的，如请求收到了或正在进行处理
2xx(成功)
3xx(重定向)要完成请求，需要进行进一步操作
4xx（请求错误）表示客户端的错误，比如请求中有错误的语法或不能完成
5xx(服务器错误)服务器处理请求时发生内部错误，不是请求出错

4.JS闭包

答案：

概念：闭包就是能够读取其他函数内部变量的函数。闭包真正的含义是，如果一个函数访问了此函数的父级及父级以上的作用域变量，就可以称这个函数是一个闭包。代码中引用了自由变量，即使创建它的上下文已经销毁，但是它依然存在。
https://blog.csdn.net/weixin_41030302/article/details/104474188
答案：

概念：闭包就是能够读取其他函数内部变量的函数。
闭包的两种主要形式：.函数作为返回值,第二种看不懂

function a(){
    var name = 'dov';
    return function(){
        return name;
    }
}
var b= a();
console.log(b()); //dov

function fn(){
var num = 3;
return function(){
	var n = 0;
	console.log(++n);
	console.log(++num);
  }
}
va fn1 = fn()
fn1()
fn1()

一般情况下，在函数fn执行完后，就应该连同它里面的变量一同被销毁，但是在这个例子中，匿名函数作为fn的返回值被赋值给了fn1，这时候相当于fn1=function(){var n = 0 … }，并且匿名函数内部引用着fn里的变量num，所以变量num无法被销毁，而变量n是每次被调用时新创建的，所以每次fn1执行完后它就把属于自己的变量连同自己一起销毁，于是乎最后就剩下孤零零的num，于是这里就产生了内存消耗的问题

例子：


function sayHi(name) {
    return () => {
        console.log( `Hi! ${name}` );
    };
}
const test = sayHi("xiaoming");
test(); // Hi! xiaoming

虽然 sayHi 函数已经执行完毕，但是其活动对象也不会被销毁，因为 test 函数仍然引用着 sayHi 函数中的变量 name，这就是闭包。
但也因为闭包引用着另一个函数的变量，导致另一个函数已经不使用了也无法销毁，所以闭包使用过多，会占用较多的内存，这也是一个副作用。

解析：

由于在 ECMA2015 中，只有函数才能分割作用域，函数内部可以访问当前作用域的变量，但是外部无法访问函数内部的变量，所以闭包可以理解成“定义在一个函数内部的函数，外部可以通过内部返回的函数访问内部函数的变量“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

三大特性：

函数嵌套函数。
函数内部可以引用外部的参数和变量。
参数和变量不会被垃圾回收机制回收。
优点：

希望一个变量长期存储在内存中。
避免全局变量的污染。
私有成员的存在。
缺点：

常驻内存，增加内存使用量。
使用不当会很容易造成内存泄露。

补充：立即执行函数。要在函数体后面加括号就能立即调用，则这个函数必须是函数表达式，不能是函数声明。
两种javascript立即执行函数的常见写法

( function(){…} )()
( function (){…} () )
不过这样的写法有什么用呢？

javascript中没用私有作用域的概念，如果在多人开发的项目上，你在全局或局部作用域中声明了一些变量，可能会被其他人不小心用同名的变量给覆盖掉，根据javascript函数作用域链的特性，可以使用这种技术可以模仿一个私有作用域，用匿名函数作为一个“容器”，“容器”内部可以访问外部的变量，而外部环境不能访问“容器”内部的变量，所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突，俗称“匿名包裹器”或“命名空间”。

5.JS函数

6.JS继承方式和优缺点

答：六种方式

一、原型链继承
这种方式关键在于:子类型的原型为父类型的一个实例对象。

       //父类型
       function Person(name, age) {
           this.name = name,
           this.age = age,
           this.play = [1, 2, 3]
           this.setName = function () { }
       }
       Person.prototype.setAge = function () { }
       //子类型
       function Student(price) {
           this.price = price
           this.setScore = function () { }
       }
       Student.prototype = new Person() // 子类型的原型为父类型的一个实例对象
       var s1 = new Student(15000)
       var s2 = new Student(14000)
       console.log(s1,s2)

特点：
父类新增原型方法/原型属性，子类都能访问到
简单，易于实现
缺点：
引用类型的属性被所有实例共享，操作引用数据类型操作的是地址。
在创建 Child 的实例时，不能向 Parent 传参
要想为子类新增属性和方法，必须要在Student.prototype = new Person() 之后执行，因为会改变原型的指向，所以应该放到重新指定之后

二、借用构造函数(经典继承)
这种方式关键在于:在子类型构造函数中通用call()调用父类型构造函数

<script type="text/javascript">
  function Person(name, age) {
    this.name = name,
    this.age = age,
    this.setName = function () {}
  }
  Person.prototype.setAge = function () {}
  function Student(name, age, price) {
    Person.call(this, name, age)  // 相当于: this.Person(name, age)
    /*this.name = name
    this.age = age*/
    this.price = price
  }
  var s1 = new Student('Tom', 20, 15000)

优点：

避免了引用类型的属性被所有实例共享，解决原型链继承的其中一个问题
可以在 Child 中向 Parent 传参
可以实现多继承（call多个父类对象）
缺点：
方法都在构造函数中定义，每次创建实例都会创建一遍方法。无法实现函数复用，每个子类都有父类实例函数的副本，影响性能
只能继承父类的实例属性和方法，不能继承原型属性和方法

三、组合继承（原型链+借用构造函数）

        function Person(name, age) {
            this.name = name,
            this.age = age,
            this.setAge = function () { }
        }
        Person.prototype.setAge = function () {
            console.log("111")
        }
        function Student(name, age, price) {
            Person.call(this,name,age)
            this.price = price
            this.setScore = function () { }
        }
        Student.prototype = new Person()
        Student.prototype.constructor = Student//组合继承也是需要修复构造函数指向的
        Student.prototype.sayHello = function () { }
        var s1 = new Student('Tom', 20, 15000)
        var s2 = new Student('Jack', 22, 14000)
        console.log(s1)
        console.log(s1.constructor) //Student
        console.log(p1.constructor) //Person

这种方式融合原型链继承和构造函数的优点，是 JavaScript 中最常用的继承模式。不过也存在缺点就是无论在什么情况下，都会调用两次构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数的内部，子类型最终会包含父类型对象的全部实例属性，但我们不得不在调用子类构造函数时重写这些属性。
优点：
融合原型链继承和构造函数的优点，是 JavaScript 中最常用的继承模式。
可以继承实例属性/方法，也可以继承原型属性/方法
不存在引用属性共享问题
可传参
函数可复用

四、原型式继承

function object(o) {
function F() {}
F.prototype = o
return new F()
}

var person = {
    name: 'Jiang',
    friends: ['Shelby', 'Court']
}
var anotherPerson = object(person) 
console.log(anotherPerson.friends) // ['Shelby', 'Court']

在object函数内部，先创建一个临时性的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回这个临时类型的一个新实例本质上来说，object对传入其中的对象执行了一次浅复制
缺点：
包含引用类型的属性值始终都会共享相应的值，这点跟原型链继承一样。

五、寄生式继承
寄生式继承的思路与寄生构造函数和工厂模式类似，即创建一个仅用于封装继承过程的函数

function createAnother(o) {
    var clone = Object.create(o) // 创建一个新对象
    clone.sayHi = function() { // 添加方法
        console.log('hi')
    }
    return clone // 返回这个对象
}

var person = {
    name: 'Jiang'
}

var anotherPeson = createAnother(person) anotherPeson.sayHi()

基于person返回了一个新对象anotherPeson，新对象不仅拥有了person的属性和方法，还有自己的sayHi方法
缺点：
跟借用构造函数模式一样，每次创建对象都会创建一遍方法。

六、寄生组合式继承
在前面说的组合模式(原型链+构造函数)中，继承的时候需要调用两次父类构造函数父类

function inheritPrototype(subType, superType) {
    var prototype = Object.create(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}

该函数实现了寄生组合继承的最简单形式这个函数接受两个参数，一个子类，一个父类第一步创建父类原型的副本，第二步将创建的副本添加constructor属性，第三部将子类的原型指向这个副本

function SuperType(name) {
    this.name = name this.colors = ['red', 'blue', 'green']
}

SuperType.prototype.sayName = function() {
    console.log(this.name)
}

function SubType(name, job) {
    // 继承属性
    SuperType.call(this, name)

    this.job = job
}

// 继承
inheritPrototype(SubType, SuperType)

var instance = new SubType('Jiang', 'student') instance.sayName()

补充：直接使用Object.create来实现，其实就是将上面封装的函数拆开，这样演示可以更容易理解

function SuperType(name) {
    this.name = name this.colors = ['red', 'blue', 'green']
}

SuperType.prototype.sayName = function() {
    console.log(this.name)
}

function SubType(name, job) {
    // 继承属性
    SuperType.call(this, name)

    this.job = job
}

// 继承
SubType.prototype = Object.create(SuperType.prototype)

// 修复constructor
SubType.prototype.constructor = SubType

var instance = new SubType('Jiang', 'student') instance.sayName()

ES6新增了一个方法，Object.setPrototypeOf，可以直接创建关联，而且不用手动添加constructor属性

// 继承
Object.setPrototypeOf(SubType.prototype, SuperType.prototype)
 
console.log(SubType.prototype.constructor === SubType) // true```

优点：
这种方式的高效率体现它只调用了一次 Parent 构造函数，并且因此避免了在 Parent. prototype 上面创建不必要的、多余的属性。
与此同时，原型链还能保持不变；
因此，还能够正常使用 instanceof 和 isPrototypeOf。
开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式

补充：原型链继承
在这里插入图片描述
在操作基本数据类型的时候操作的是值，在操作引用数据类型的时候操作的是地址，如果说父类的私有属性中有引用类型的属性，那它被子类继承的时候会作为公有属性，这样子类1操作这个属性的时候，就会影响到子类2。

       //父类型
       function Person(name, age) {
           this.name = name,
           this.age = age,
           this.play = [1, 2, 3]//引用数据类型Array类型，操作的是地址
           this.setName = function () { }
       }
       Person.prototype.setAge = function () { }
       //子类型
       function Student(price) {
           this.price = price
           this.setScore = function () { }
       }
       Student.prototype = new Person() // 子类型的原型为父类型的一个实例对象
       var s1 = new Student(15000)
       var s2 = new Student(14000)
       console.log(s1,s2)
       //这样子类1操作这个属性的时候，就会影响到子类2。
       s1.play.push(4)
       console.log(s1.play, s2.play)
       console.log(s1.__proto__ === s2.__proto__)//true
       console.log(s1.__proto__.__proto__ === s2.__proto__.__proto__)//true

s1中play属性发生变化，与此同时，s2中play属性也会跟着变化。

7.JS原型

每个 JS 函数都有一个属性 prototype ，该属性指向一个对象，这个对象就被称为原型对象。更准确的说，这个对象是这个函数的实例的原型对象。所有由这个函数构造出来的实例都有一个属性 proto 指向原型对象。

在原型对象上，有一个属性 constructor 指向产生这些实例的构造函数。

可以将原型对象理解为实例的公共区域，定义在原型对象上的所有属性或方法都可以被实例共享。

那么，原型对象是怎么产生的呢？一般情况下，原型对象是由 Object 产生的。那么，Object 实例的原型的原型呢？如果每个原型对象还有原型，那么不就是无止尽了吗？答案显然是否定的，Object 实例的原型没有原型对象（null）了。

由此，多个原型组成的就是一条原型链，在 JS 中，访问一个对象中的属性或方法，首先在对象自身中查找，如果找到则返回，否则去这个对象的原型中查找，如果没找到，就去原型的原型中查找，一直找到 Object 的原型为止。如果最终没有找到，则返回 undefined

在这里插入图片描述

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。
举例：有如下代码

function Parent(month){
    this.month = month;
}

var child = new Parent('Ann');  //父类型的一个实例是子类型的。。。？

console.log(child.month); // Ann

console.log(child.father); // undefined

在这里插入图片描述

补充：
原型：

所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象
所有函数都有一个prototype(原型)属性，属性值是一个普通的对象
所有引用类型的__proto__属性指向它构造函数的prototype

var a = [1,2,3];
a.__proto__ === Array.prototype; // true

8.常用数据结构和算法

9.嘟来说法pc端页面，及少量数据对接，ajaxa,json？？

10.科研工作

是郭橙橙呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0424简历涉及知识点

1.HTML、CSS基本知识，常用语句，可结合具体项目2.h5页面布局//简易博客，电商站首页布局实战（Xmind）重点:4个，不让其竖着显示，并列显示，横向页面分成四份（2，3，3，2）col1，col2，类似bootstrap栅格,block，左浮动，position：relative,min-height:1px;.col-1:width:10% .col-8:width:80%;搜索框与用户交互（input80%、button20%他们是行内块元素）：focus时产生向内投影；b
复制链接

扫一扫