0

0

js中interview知识点梳理

小云云

小云云

发布时间:2018-03-19 17:47:57

|

1614人浏览过

|

来源于php中文网

原创

这里写链接内容一、JavaScript 的 typeof 返回哪些数据类型?首先,javascript的数据类型分两类:原始类型、引用类型 ,希望能帮助到大家。

原始类型:null、undefined、number、string、boolean
引用类型:object、symbol(es6)
(至于原始类型与引用类型的区别,可以见自己的一篇博文:js基本语法、变量、数据类型)
然后,typeof这一运算符可以判断出所有的原始类型。 typeof 返回七种可能的值:“number”、“string”、“boolean”、“object”、”symbol”、“function”和“undefined”。

二、请写出以下运算结果

alert(typeof null); //object 
alert(typeof undefined);//undefined 
alert(typeof NaN);//number 
alert(NaN == undefined);//false 
alert(NaN == NaN);//false 
var str = “123abc”; 
alert(typeof str++); 
alert(str);//string

三、为什么还有instanceof这个运算符?

typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型。在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 “object”。对于 Array,Null 等特殊对象使用 typeof 一律返回 object,这正是 typeof 的局限性。

instanceof 用于判断一个变量是否某个对象的实例

如 :  var a=new Array();  alert(a instanceof Array); 会返回 true,  同时,   alert(a instanceof Object) 也会返回 true;再如:  function test(){};  var a=new test();  alert(a instanceof test); 会返回true

另外,更重的一点是 instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型。例如:

function Aoo(){} 
function Foo(){} 
Foo.prototype = new Aoo();//JavaScript 原型继承var foo = new Foo(); 
console.log(foo instanceof Foo)//true console.log(foo instanceof Aoo)//true

上面的代码中是判断了一层继承关系中的父类,在多层继承关系中,instanceof 运算符同样适用。

console.log(Object instanceof Object);//true console.log(Function instanceof Function);//true console.log(Number instanceof Number);//false console.log(String instanceof String);//false console.log(Function instanceof Object);//true console.log(Foo instanceof Function);//true console.log(Foo instanceof Foo);//false

看了上面的代码是不是又晕头转向了?为什么 Object 和 Function instanceof 自己等于 true,而其他类 instanceof 自己却又不等于 true 呢?如何解释?要想从根本上了解 instanceof 的奥秘,需要从两个方面着手:
1,语言规范中是如何定义这个运算符的。
2,JavaScript 原型继承机制。
JavaScript instanceof 运算符代码:

function instance_of(L, R) {//L 表示左表达式,R 表示右表达式
 var O = R.prototype;// 取 R 的显示原型
 L = L.__proto__;// 取 L 的隐式原型
 while (true) { 
   if (L === null) 
     return false; 
   if (O === L)// 这里重点:当 O 严格等于 L 时,返回 true 
     return true; 
   L = L.__proto__; 
 } 
}

至于instanceof的复杂用法,可以参考如下链接:
JavaScript instanceof 运算符深入剖析

三、例举至少 3 种强制类型转换和 2 种隐式类型转换?

可以参考自己的博文:JS数据类型转换

  1. 强制类型转换: 明确调用内置函数,强制把一种类型的值转换为另一种类型。强制类型转换主要有:Boolean、Number、String、parseInt、parseFloat

  2. 隐式类型转换: 在使用算术运算符时,运算符两边的数据类型可以是任意的,比如,一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算,是因为 JavaScript 引擎在运算之前会悄悄的把他们进行了隐式类型转换。隐式类型转换主要有:+、–、==、!

五、JavaScript 的事件流模型都有什么?

事件流描述的是从页面中接收事件的顺序。 DOM 结构是树形结构,当页面中的某一个元素触发了某个一个事件,事件会从最顶层的 window 对象开始,向下传播到目标元素,途径的祖先节点都会触发对应的事件,如果当前节点的该事件绑定了事件处理函数的话,则会执行该函数当事件达到目标元素并执行绑定函数(如果有绑定的话)后,事件又会向上传播到 window 元素,途径的祖先节点都会触发对应的事件

事件流包含三个阶段:

事件捕捉阶段
 处于目标阶段


 事件冒泡阶段

事件捕捉阶段:事件开始由顶层对象触发,然后逐级向下传播,直到目标的元素;
处于目标阶段:处在绑定事件的元素上;
事件冒泡阶段:事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素;

六、BOM 对象有哪些,列举 window 对象?

1、window对象 ,是JS的最顶层对象,其他的BOM对象都是window对象的属性;

2、document对象,文档对象;

3、location对象,浏览器当前URL信息;

4、navigator对象,浏览器本身信息;

5、screen对象,客户端屏幕信息;

6、history对象,浏览器访问历史信息;

七、请简述 AJAX 及基本步骤?

参考我的博文:Ajax

参考答案:

简述 AJAX:AJAX即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

AJAX 基本步骤:

初始化ajax对象
连接地址,准备数据
发送请求
接收数据(正在接收,尚未完成)
接收数据完成
//初始化ajax对象
var xhr = new XMLHttpRequest();
//连接地址,准备数据
xhr.open(“方式”,”地址”,是否为异步);
//接收数据完成触发的事件
xhr.onload =function(){}
//发送数据
xhr.send();

八、HTTP 状态消息 200 302 304 403 404 500 分别表示什么?

200:请求已成功,请求所希望的响应头或数据体将随此响应返回。
302:请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求。只有在 Cache-Control 或 Expires 中进行了指定的情况下,这个响应才是可缓存的。
304:如果客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码。304 响应禁止包含消息体,因此始终以消息头后的第一个空行结尾。
403:服务器已经理解请求,但是拒绝执行它。
404:请求失败,请求所希望得到的资源未被在服务器上发现。
500:服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。一般来说,这个问题都会在服务器端的源代码出现错误时出现。

ShyPost企业网站管理系统17.3
ShyPost企业网站管理系统17.3

ShyPost企业管理系统支持电脑版+手机版+App,数据一站式统一后台管理,访问同一域名时,电脑打开为电脑版,手机打开为手机版。本系统是一套基于ASP的智能建站软件!产品具有界面新颖美观、动感时尚等特点,是一套服务于中小企业的CMS内容管理系统,软件使用门槛低,无须专业电脑知识,全后台操作管理,操作简单且功能强大,同时软件还具有极强的可扩展性,可以适应各行业不同的需求。

下载

九、同步和异步的区别?

首先同步异步于阻塞非阻塞并没有关系。同步异步主要是事情做完以后,如何进行处理、或者说关注的是一种消息通信机制。

同步异步可以说是对被请求方来说的,被请求者使用什么方式来告知处理结果。

同步的情况下,是由处理消息者自己去等待消息是否被触发;
而异步的情况下是由触发机制来通知处理消息者;

阻塞非阻塞,主要是对于请求者而言的。
阻塞:发出请求等待结果返回,然后再处理后续的事情;
非阻塞:发出请求不等待结果返回,可以接着做后续的事情;

十、GET和POST的区别,何时使用POST?

GET:一般用于查询数据,使用URL传递参数,由于浏览器对地址栏长度有限制,所以对使用get方式所发送信息的数量有限制,同时浏览器会记录(历史记录,缓存)中会保留请求地址的信息,包括地址后面的数据。get 只能发送普通格式(URL 编码格式)的数据。

POST:一般用于向服务器发送数据,对所发送的数据的大小理论上是没有限制,浏览器会缓存记录地址,但是不会记录 post 提交的数据。post 可以发送纯文本、URL编码格式、二进制格式的字符串,形式多样。

在以下情况中,请使用 POST 请求:

以提交为目的的请求(类似语义化,get 表示请求,post 表示提交);
发送私密类数据(用户名、密码)(因为浏览器缓存记录特性);
向服务器发送大量数据(数据大小限制区别);
上传文件图片时(数据类型区别);

十一、 AJAX 的局限性?

1、AJAX 不支持浏览器 back 按钮。
2、安全问题 AJAX 暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。不会执行你的 JS 脚本,只会操作你的网页源代码;
4、跨域请求有一定限制。解决方式:jsonp;

十二、new 操作符具体干了什么呢?

1、创建一个新对象;
2、把函数中上下文(作用域)对象this指向该对象;
3、执行代码,通过this给新对象添加属性或方法;
4、返回对象;

十三、null 和 undefined 的区别?

null: null表示空值,转为数值时为0;

undefined:undefined表示”缺少值”,就是此处应该有一个值,但是还没有定义。

变量被声明了,但没有赋值时,就等于undefined。
对象没有赋值的属性,该属性的值为undefined。
函数没有返回值时,默认返回undefined。

详见我的博文:JS判断数据类型、null与undefined的区别?

十四、JavaScript 原型,原型链 ? 有什么特点?作用域链?

作用域链的理解:
   当执行一段JavaScript代码(全局代码或函数)时,JavaScript引擎会创建为其创建一个作用域又称为执行上下文(Execution Context),在页面加载后会首先创建一个全局的作用域,然后每执行一个函数,会建立一个对应的作用域,从而形成了一条作用域链。每个作用域都有一条对应的作用域链,链头是全局作用域,链尾是当前函数作用域。
    作用域链的作用是用于解析标识符,当函数被创建时(不是执行),会将this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中,当JavaScript需要查找变量X的时候(这个过程称为变量解析),它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性,如果没有找到就顺着作用域链继续查找,直到查找到链头,也就是全局作用域链,仍未找到该变量的话,就认为这段代码的作用域链上不存在x变量,并抛出一个引用错误(ReferenceError)的异常。

JavaScript 原型: 每创建一个函数,函数上都有一个属性为 prototype,它的值是一个对象。 这个对象的作用在于当使用函数创建实例的时候,那么这些实例都会共享原型上的属性和方法。

原型链: 在 JavaScript 中,每个对象都有一个指向它的原型(prototype)对象的内部链接(proto)。这个原型对象又有自己的原型,直到某个对象的原型为 null 为止(也就是不再有原型指向)。这种一级一级的链结构就称为原型链(prototype chain)。 当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止;到查找到达原型链的顶部(Object.prototype),仍然没有找到指定的属性,就会返回 undefined。

十五、JavaScript代理
当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。

比如我们需要向一个ul中动态添加很多个li,需要遍历li逐个添加点击事件

    var count = 100; var ulList = document.getElementById("list"); //动态构建节点 for(var i = count;i--;){ var liDom = document.createElement('li'); ulList.appendChild(liDom); } //绑定点击事件 var liNode = ulList.getElementByTagName("li"); for(var i=0, l = liNodes.length; i < l; i++){ liNode[i].onClick = function(){ //li点击事件 } }

    众所周知,DOM操作是十分消耗性能的。所以重复的事件绑定简直是性能杀手。而事件代理的核心思想,就是通过尽量少的绑定,去监听尽量多的事件。如何做呢?答案是利用事件冒泡机制,对其父节点ul进行事件绑定(Event Bubble),然后通过event.target来判断是哪个节点触发的事件,从而减少很多EventHandler的绑定。

    “` 
    var count = 100; 
    var ulList = document.getElementById(“list”); 
    //动态构建节点 
    for(var i = count;i–;){ 
    
     var liDom = document.createElement(‘li’); 
    
     ulList.appendChild(liDom); 
    } 
    //绑定点击事件 
    var liNode = ulList.getElementByTagName(“li”); 
    liNode.onClick = function(e){ 
    
     if(e.target && e.target.nodeName.toUpperCase == “LI”) { 
    
      // li点击事件 
    
     } 
    }

    十六、如何理解闭包?
    闭包

    十七、call和apply的作用是什么?区别是什么?
    call和apply的功能基本相同,都是实现继承或者转换对象指针的作用;
    唯一不通的是前者参数是罗列出来的,后者是存到数组中的;
    call或apply功能就是实现继承的;与面向对象的继承extends功能相似;但写法不同;
    语法:
    .call(对象[,参数1,参数2,….]);//此地参数是指的是对象的参数,非方法的参数;
    .apply(对象,参数数组)//参数数组的形式:[参数1,参数2,……]

    十八、JavaScript 如何实现继承?

    (1)构造继承 (2)原型继承 (3)实例继承 (4)拷贝继承
     //原型prototype机制或apply和call方法去实现较简单,建议使用构造函数与原型混合方式。 function Parent()
     {  
         this.name = ‘song’; } function Child() {
         this.age = 28; } Child.prototype = new Parent(); //通过原型,继承了Parent var demo = new Child(); alert(demo.age); alert(demo.name); //得到被继承的属性

    十九、JavaScript 有哪几种创建对象的方式?

    javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象,当然还可以用JSON;但写法有很多种,也能混合使用。 //
     (1)对象字面量的方式
     person={firstname:”Mark”,lastname:”Yun”,age:25,eyecolor:”black”};
     (2)用function来模拟无参的构造函数 function Person(){} var person = new Person();
     //定义一个function,如果使用new”实例化”,该function可以看作是一个Class person.name =
     “Xiaosong”; person.age = “23”; person.work = function() {
          alert(“Hello ” + person.name); } person.work(); (3)用function来模拟参构造函数来实现(用this关键字定义构造的上下文属性) function
     Person(name,age,hobby) {  
         this.name = name; //this作用域:当前对象
         this.age = age;  
         this.work = work;  
         this.info = function() {  
             alert(“我叫” + this.name + “,今年” + this.age + “岁,是个” + this.work);  
         } } var Xiaosong = new Person(“WooKong”,23,”程序猿”); //实例化、创建对象 Xiaosong.info(); //调用info()方法 (4)用工厂方式来创建(内置对象) var jsCreater = new
     Object(); jsCreater.name = “Brendan Eich”; //JavaScript的发明者
     jsCreater.work = “JavaScript”; jsCreater.info = function() {  
         alert(“我是”+this.work+”的发明者”+this.name); } jsCreater.info(); (5)用原型方式来创建 function Standard(){} Standard.prototype.name =
     “ECMAScript”; Standard.prototype.event = function() {  
         alert(this.name+”是脚本语言标准规范”); } var jiaoben = new Standard(); jiaoben.event(); (6)用混合方式来创建 function iPhone(name,event) {
          this.name = name;
          this.event = event; } iPhone.prototype.sell = function() {  
         alert(“我是”+this.name+”,我是iPhone5s的”+this.event+”~ haha!”); } var SE = new iPhone(“iPhone SE”,”官方翻新机”); SE.sell();

    二十、JavaScript 中,有一个函数,执行对象查找时,永远不会去查找原型,这个函数是哪个?

    hasOwnProperty // JavaScript 中 hasOwnProperty
     函数方法是返回一个布尔值,指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性;该属性必须是对象本身的一个成员。
     //
     使用方法:object.hasOwnProperty(proName)其中参数object是必选项,一个对象的实例。proName是必选项,一个属性名称的字符串值。
     // 如果 object 具有指定名称的属性,那么JavaScript中hasOwnProperty函数方法返回 true,反之则返回
     false。

    二十一、Ajax 是什么?如何创建一个 Ajax ?

    ajax的全称:Asynchronous Javascript And XML,异步传输+js+xml。
     所谓异步,在这里简单地解释就是:向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果它自己会根据设定进行后续操作,与此同时,页面是不会发生整页刷新的,提高了用户体验。
     (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
     (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
      (3)设置响应HTTP请求状态变化的函数
      (4)获取异步调用返回的数据  
      (5)使用JavaScript和DOM实现局部刷新

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    Python 自然语言处理(NLP)基础与实战
    Python 自然语言处理(NLP)基础与实战

    本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

    9

    2026.01.27

    拼多多赚钱的5种方法 拼多多赚钱的5种方法
    拼多多赚钱的5种方法 拼多多赚钱的5种方法

    在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

    108

    2026.01.26

    edge浏览器怎样设置主页 edge浏览器自定义设置教程
    edge浏览器怎样设置主页 edge浏览器自定义设置教程

    在Edge浏览器中设置主页,请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”,点击“添加新页面”并输入网址。若要使用主页按钮,需在“外观”设置中开启“显示主页按钮”并设定网址。

    13

    2026.01.26

    苹果官方查询网站 苹果手机正品激活查询入口
    苹果官方查询网站 苹果手机正品激活查询入口

    苹果官方查询网站主要通过 checkcoverage.apple.com/cn/zh/ 进行,可用于查询序列号(SN)对应的保修状态、激活日期及技术支持服务。此外,查找丢失设备请使用 iCloud.com/find,购买信息与物流可访问 Apple (中国大陆) 订单状态页面。

    123

    2026.01.26

    npd人格什么意思 npd人格有什么特征
    npd人格什么意思 npd人格有什么特征

    NPD(Narcissistic Personality Disorder)即自恋型人格障碍,是一种心理健康问题,特点是极度夸大自我重要性、需要过度赞美与关注,同时极度缺乏共情能力,背后常掩藏着低自尊和不安全感,影响人际关系、工作和生活,通常在青少年时期开始显现,需由专业人士诊断。

    6

    2026.01.26

    windows安全中心怎么关闭 windows安全中心怎么执行操作
    windows安全中心怎么关闭 windows安全中心怎么执行操作

    关闭Windows安全中心(Windows Defender)可通过系统设置暂时关闭,或使用组策略/注册表永久关闭。最简单的方法是:进入设置 > 隐私和安全性 > Windows安全中心 > 病毒和威胁防护 > 管理设置,将实时保护等选项关闭。

    6

    2026.01.26

    2026年春运抢票攻略大全 春运抢票攻略教你三招手【技巧】
    2026年春运抢票攻略大全 春运抢票攻略教你三招手【技巧】

    铁路12306提供起售时间查询、起售提醒、购票预填、候补购票及误购限时免费退票五项服务,并强调官方渠道唯一性与信息安全。

    112

    2026.01.26

    个人所得税税率表2026 个人所得税率最新税率表
    个人所得税税率表2026 个人所得税率最新税率表

    以工资薪金所得为例,应纳税额 = 应纳税所得额 × 税率 - 速算扣除数。应纳税所得额 = 月度收入 - 5000 元 - 专项扣除 - 专项附加扣除 - 依法确定的其他扣除。假设某员工月工资 10000 元,专项扣除 1000 元,专项附加扣除 2000 元,当月应纳税所得额为 10000 - 5000 - 1000 - 2000 = 2000 元,对应税率为 3%,速算扣除数为 0,则当月应纳税额为 2000×3% = 60 元。

    33

    2026.01.26

    oppo云服务官网登录入口 oppo云服务登录手机版
    oppo云服务官网登录入口 oppo云服务登录手机版

    oppo云服务https://cloud.oppo.com/可以在云端安全存储您的照片、视频、联系人、便签等重要数据。当您的手机数据意外丢失或者需要更换手机时,可以随时将这些存储在云端的数据快速恢复到手机中。

    107

    2026.01.26

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    React 教程
    React 教程

    共58课时 | 4.2万人学习

    TypeScript 教程
    TypeScript 教程

    共19课时 | 2.5万人学习

    Bootstrap 5教程
    Bootstrap 5教程

    共46课时 | 3万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号