js面试考点一

最新推荐文章于 2024-10-02 05:39:15 发布

一雨方知深秋

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量593

点赞数 10

分类专栏： javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_63178019/article/details/141311443

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

考点一：数据类型

数据类型：

string,number,object,boolean,null,undefined,symbol

判断数据类型的方式：

type,instanceOf,Constructor,Object.prototype.toStrign.call

三种强制类型转换：

Number("10")转换为number类型

parseInt("20.5")转换为number取整

parseFloat("10.5")转换为number保留小数

String(10)转换为string类型

Boolean(1)转换为Boolean类型

两种隐式类型转换：

1.四则运算转换：

“+”是双目运算符，只要其中一个是string，表达式的值便是一个String

其他四则运算：只要其中一个是Number类型，表达式便是一个Number

2.判断语句转换

10==”10“ ”10“隐式转换为10

考点2：传值 vs 传址

1.传值

基本类型的值是通过值复制的方式来赋值或者传递的，这里b的改变不会影响a。

基本类型：string,number,null,undefined,bollean,以及ES6中的symbol

let a = 1
let b = a
b = 3
console.log(a, b)

控制台打印

2.传址

引用类型赋值并不会真正重新拷贝引用值，而是拷贝引用的地址，也就是传址。c和d是引用同一个地址，所以如果修改了c，那么d的值也会改变

引用类型：数组，对象，函数

let c = { name: 'hello' }
let d = c
c.name = 'hi'
console.log(c, d)

控制台打印

考点3：作用域

全局作用域+局部作用域

全局作用域：script标签和js文件最外层，在此声明的变量在函数内部也可以被访问

局部作用域：（函数作用域+块作用域，var声明的变量不会产生块作用域）

作用域链（底层的变量查找机制）

（1）函数执行，优先在当前函数作用域中查找变量

（2）当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域

变量提升

允许在变量声明之前即被访问（仅存在于var声明变量），把所有var声明的变量提升到当前作用域的前面，但是只提升声明，不提升赋值

function test() {
      console.log(a)
      console.log(foo())
      var a = 1
      function foo() {
        return 2
      }
    }
    test()

控制台打印

考点4：闭包

含义：有权访问另一个函数作用域中的变量的函数

闭包就是建立在函数内部的子函数，当函数执行完之后，作用域就会被清理，内存也随之会被回收。但是由于闭包函数是建立在函数内部的子函数，它可以访问上级作用域，即使上级函数执行完，作用域也不会随之销毁。

考点5：原型链和继承

原型链：当对象查找一个属性的时候，如果没有在自身找到，那么就会查找自身的原型，如果原型还没有找到，那么会继续查找原型的原型，直到找到Object.prototype的原型，此时原型为null,查找停止。

这种通过原型链接的逐级向上的查找链被称为原型链。

原型链继承：一个对象可以使用另外一个对象的属性或者方法，就称之为继承。

通过将这个对象的原型设置为另外一个对象，这样根据原型链的规则，如果查找一个对象属性且自身不存在时，就会查找另外一个对象，相当于一个对象可以使用另外一个对象的属性和方法

使用prototype实现继承

    function Father(name)
    {this.name=name}
    Father.prototype.myName = function()
    {return this.name}
    // 继承属性，借用构造函数调用
    function Son(name,label){
      Father.call(this,name)
      this.label=label
    }
    // 继承方法，创建备份
    Son.prototype=Object.create(Father.prototype)
    // 必须设置正确的构造函数，要不然在判断类型出错
    Son.prototype.constructor=Father
    Son.prototype.myLabel=function()
    {return this.label}


function Father 定义了一个构造函数，用于创建和初始化对象，this关键字指代正在创建的对象实例，this.name=name,将传入的参数赋值给对象的name属性。

Father.prototype是Father构造函数的原型对象，通过new Fathre（）创建的对象实例都会继承这个原型对象上的属性和方法。

Father.prototype.myName 是在Father构造函数的原型对象上添加了一个myName方法，该方法返回该对象实例的name属性值

function Son(name,label)定义了构造函数Son,Father.call调用了Father构造函数，

Father.call(this,name)将this指向Son对象的实例，而name本就是定义Father构造函数时的参数形式，不变而已。

Son.prototype=Object.create(Father.prototype)是创建了一个原型指向Father.prototype的新对象，赋值给Son.prototype,也就是新对象继承了Father.prototype上的所有属性和方法

Son.prototype.constructor是修正Son原型对象上的constructor属性使其指向Father构造函数。

constructor的四大作用
1.标识构造函数
constructor 属性指向创建当前对象实例的构造函数。默认情况下，当你创建一个对象的原型时，constructor 属性会被设置为与该对象原型相关联的构造函数
2.原型链的导航
constructor 属性可以用来反向查找构造函数。例如，如果你有一个对象 obj，你可以通过 obj.constructor 找到构造 obj 的函数，这对于调试和动态代码很有用。
3.确保正确的继承
在继承中，如果你改变了构造函数的原型链，constructor 属性也可能需要被更新
4.用于自定义类型检查
constructor 属性还可以用于类型检查，例如判断一个对象是否是某个构造函数创建的实例

考点6：BOM（浏览器对象模型）和DOM（文档对象模型）操作

BOM：提供了独立于内容，与浏览器窗口进行交互的对象；由于其主要用于管理窗口与窗口之间的通讯，因此核心对象是window;BOM由一系列相关对象构成，并且每个对象都提供了很多方法和属性

DOM：利用DOM我们可以操作HTML中的元素，使得网页被下载到浏览器后，开发者可以根据需求进行页面内容的修改

常见的BOM对象和方法：

window对象，是JS的最顶层对象，其他的BOM对象都是window对象的属性；

document对象，文档对象；

location对象，浏览器当前URL信息；

navigator对象，浏览器本身信息；

screen对象，客户端屏幕信息；

history对象，浏览器访问历史信息；

常用的方法：window.alert('提示信息')

window.confirm("确认信息")

window.prompt("弹出输入框")

window.open("url地址"，“打开的方式”，“新窗口的大小”）

window.close()关闭当前的网页

window.moveTo() -移动当前窗口

window.resizeTo() -调整当前窗口的尺寸

swindow.setTimeout(函数，时间)只执行一次

window.setInterval(函数，时间)无限执行

考点7：Ajax与跨域

1.原生js ajax请求有几个步骤

1.创建XMLHttpRequest对象
var ajax = new XMLHttpRequest()

2.规定请求类型，URL以及是否异步处理请求
Ajax.open('GET',url,true)

3.发送信息到服务器时内容编码类型
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded")

4.发送请求
ajax.send(null)

5.接受服务器响应数据
ajax.onreadystatechange = function() {
  if (obj.readyState == 4 && (obj.status == 200 ||obj.status == 304){
}
}

2.生么情况造成跨域

同源策略限制，不同源会造成跨域。

协议，域名，端口号三者要求全部相同，只要一个不相同就是非同源策略

3.跨域解决方案

a.动态创建一个script标签，利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。

//创建一个script标签
var script = document.createElement("script")

//script的src属性设置接口地址，并带一个calback回调函数名称
script.src="http://xxxxx/index.php?callback = jsonpCallback"

//插入到页面
document.head.appendChild(script)

//通过定义函数名去接收后台返回数据
function jsonpCallback(data){
//注意jsonp返回的数据是json对象可以直接使用
//ajax去的数据是json字符串需要转换为json对象才可以使用
}

b.CORS：跨域资源共享原理：服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求限制：浏览器需要支持HTML5，可以支持POST，PUT等方法兼容ie9以上

需要后台设置
Access-Control-Allow-Origin: *
//
允许所有域名访问，或者
Access-Control-Allow-Origin: http://a.com
//
只允许所有域名访问

c.向代理属于后端的解决方案，需要搭建一个中转nginx服务器，用于转发请求。也是最正规的解决方案

4.解释JSONP的工作原理

JSONP是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。