原生JS基础

小咪咪 2022-07-13 00:08 239阅读 0赞

*  JavaScript有几种类型的值 你能画一下他们的内存图吗
 *  创建函数的几种方式调用函数的几种方式
 *  创建对象的几种方式
 *  原型 原型链 new操作符具体干了什么呢
 *  继承是什么 如何实现继承
 *  变量声明提升和函数声明提升
 *  什么是window对象 什么是document对象
 *  数组有哪些原生方法
 *  谈谈this对象的理解
 *  闭包是什么 为什么要用它
 *  Ajax 是什么 如何创建一个Ajax 同步和异步的区别 对JSON的了解
 *  函数的call apply方法 的作用和区别
 *  DOM操作如何添加移除移动复制创建和查找节点
 *  事件流 介绍一下addEventListener方法
 *  给一个dom同时绑定两个点击事件一个用捕获一个用冒泡会执行几次事件会先执行冒泡还是捕获
 *  事件代理
 *  eval是做什么的
 *  如何获取文件扩展名
 *  哪个函数会查找对象是否存在一个属性但是不会去查找原型
 *  js延迟加载的方式有哪些

# JavaScript有几种类型的值？， 你能画一下他们的内存图吗？ #

两大类：  
栈：基本数据类型（Undefined，Null，Boolean，Number、String）  
堆：引用数据类型（对象、数组和函数）

两种类型的区别是：存储位置不同；

*  原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
 *  引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体

![这里写图片描述][20161007143531197]

摘自[http://blog.csdn.net/lxcao/article/details/52749421][http_blog.csdn.net_lxcao_article_details_52749421]

# 创建函数的几种方式？调用函数的几种方式？ #

*  函数声明
 *  函数表达式
 *  构造函数Function

方法调用  
函数调用  
构造函数  
apply

# 创建对象的几种方式？ #

摘自[http://www.cnblogs.com/wangjq/p/3755691.html][http_www.cnblogs.com_wangjq_p_3755691.html]

# 原型， 原型链 ? new操作符具体干了什么呢? #

[http://blog.csdn.net/newfishcoder/article/details/53691677][http_blog.csdn.net_newfishcoder_article_details_53691677]

# 继承是什么 ？ 如何实现继承？ #

函数的原型对象constructor默认指向函数本身，原型对象除了有原型属性外，为了实现继承，还有一个原型链指针proto，该指针指向上一层的原型对象，而上一层的原型对象的结构依然类似，这样利用proto一直指向Object的原型对象上，而Object的原型对象用Object.proto = null表示原型链的最顶端，如此变形成了javascript的原型链继承，同时也解释了为什么所有的javascript对象都具有Object的基本方法。

实现继承的方式：  
[http://www.jb51.net/article/81766.htm][http_www.jb51.net_article_81766.htm]

# 变量声明提升和函数声明提升？? #

变量声明提升：  
函数内声明的所有变量在函数体内始终是有定义的，也就是说变量在声明之前已经可用，所有这特性称为声明提前。  
**而变量赋值操作留在原来的位置**。  
声明提前是在JavaScript引擎的预编译时进行，是在代码开始运行之前。

函数声明提升：  
函数声明语句将会被提升到外部脚本或者外部函数作用域的顶部（是不是跟变量提升非常类似）。正是因为这个特征，**所以可以把函数声明放在调用它的语句后面**。

函数声明方式：

function fn(){ 
        //函数体
    }

函数作为值赋给变量时只有变量“被提前”了，函数没有“被提前”

var fn = function(){ 
        //函数体
    }

变量的声明被提前到作用域顶部，赋值保留在原地

# 什么是window对象? 什么是document对象? #

Window 对象表示浏览器中打开的窗口。  
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

document对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档

# 数组有哪些原生方法 #

栈方法：pop(),push()  
堆方法：shift(),unshift()  
重排序方法：reverse(),sort()  
操作方法：concat(),slice(),splice()  
位置方法：indexOf(),lastIndexOf(),join()  
数组迭代方法：every(),filter(),forEach(),map(),some()

# 谈谈this对象的理解 #

this在一般情况下，指向函数所在的执行环境的对象  
再全局执行环境，this就指向window，在调用对象的方法时，this指向该对象，

# 闭包是什么， 为什么要用它？ #

闭包：有权访问其他函数作用域的函数  
作用：  
1,可以读取函数内部的局部变量  
2,让这些变量的值始终保持在内存中

# Ajax 是什么? 如何创建一个Ajax？ 同步和异步的区别? 对JSON的了解？ #

[http://blog.csdn.net/newfishcoder/article/details/53700663][http_blog.csdn.net_newfishcoder_article_details_53700663]

# 函数的call() apply()方法 的作用和区别？ #

作用：改变一个函数的this值， 即执行对象，和传递给这个函数的参数

区别：两者只是第二个参数不同， apply第二个参数是数组

[http://blog.csdn.net/newfishcoder/article/details/53707611][http_blog.csdn.net_newfishcoder_article_details_53707611]

# DOM操作——如何添加、移除、移动、复制、创建和查找节点? #

createElement ——创建节点  
createTextNode ——创建文本节点

appendChild()——添加  
removeChild()——移除  
replaceChild()——替换、  
insertBefore()——插入

cloneNode()——克隆

# 事件流？ 介绍一下addEventListener方法 #

**事件流**描述的是从页面中接收事件的顺序

DOM2级事件流规定的事件流包括三个阶段：  
一、事件捕获阶段  
二、处于目标阶段和  
三、冒泡阶段。  
首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应。

可通过给元素调用addEventListener()方法，指定事件只发生捕获或者只发生冒泡

element.addEventListener(event, function, useCapture)

event为绑定的事件，function为事件触发执行的函数，  
useCapture为一个布尔值，  
若为true，事件在捕获阶段执行  
若为false（默认），事件在冒泡阶段执行

![这里写图片描述][8b1e3e3f54d0557d9f6b9b8fe9b317e6.png]

# 给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？ #

结果  
![这里写图片描述][20160512201237194]  
结论：  
绑定在**被点击元素（例子中是btn）的事件**是按照**代码顺序发生** ，**其他元素通过冒泡或者捕获“感知”的事件**，按照W3C的标准，先发生捕获事件，后发生冒泡事件。所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 。

# 事件代理 #

原理：利用事件冒泡，把事件添加到父元素上  
**何时使用事件代理？**  
动态加载的html的时候  
**好处**：  
1，防止内存泄漏?  
2，提升性能  
3，添加新元素还会有绑定事件，不许要重新添加

# eval是做什么的？ #

eval()函数可以把一个字符串当作一个JavaScript表达式一样去执行它

# 如何获取文件扩展名？ #

用正则：  
var pattern = /.\[^.\]+/

用字符串方法：  
split(“.”)，再获取数组的最后一项

# 哪个函数会查找对象是否存在一个属性但是不会去查找原型 #

hasOwnProperty

JavaScript 中 hasOwnProperty 函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。

# js延迟加载的方式有哪些？ #

一、async、defer  
常规script标签：立即加载脚本并执行。同步进行，阻塞文档解析。  
async：HTML5中属性，该属性规定一旦脚本可用，则异步执行。内联脚本无效。  
异步加载脚本，加载完成后异步执行。完全不考虑脚本之间的依赖，多个脚本可能会乱序执行  
defer：该属性规定是否对脚本执行进行延迟，  
先异步加载，在文档元素解析完成之后执行。

二、setTimeout延迟方法的加载时间  
三、放在body元素的最下方  
四、[http://www.chinaz.com/web/2015/0629/417776.shtml][http_www.chinaz.com_web_2015_0629_417776.shtml]

[20161007143531197]: /images/20220713/89e7ecd95713422ba1837c686e5de0e0.png
[http_blog.csdn.net_lxcao_article_details_52749421]: http://blog.csdn.net/lxcao/article/details/52749421
[http_www.cnblogs.com_wangjq_p_3755691.html]: http://www.cnblogs.com/wangjq/p/3755691.html
[http_blog.csdn.net_newfishcoder_article_details_53691677]: http://blog.csdn.net/newfishcoder/article/details/53691677
[http_www.jb51.net_article_81766.htm]: http://www.jb51.net/article/81766.htm
[http_blog.csdn.net_newfishcoder_article_details_53700663]: http://blog.csdn.net/newfishcoder/article/details/53700663
[http_blog.csdn.net_newfishcoder_article_details_53707611]: http://blog.csdn.net/newfishcoder/article/details/53707611
[8b1e3e3f54d0557d9f6b9b8fe9b317e6.png]: /images/20220713/953a4f6461d642f6bd67ef497631a6e7.png
[20160512201237194]: /images/20220713/da498bd28bfe41b0aacd3c27c8225d77.png
[http_www.chinaz.com_web_2015_0629_417776.shtml]: http://www.chinaz.com/web/2015/0629/417776.shtml