JS学习笔记

1.

引用JS外部文件：

在JS文件中，不需要

10. prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。

prompt(str1, str2);

str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改

1. 点击确定按钮，文本框中的内容将作为函数返回值
2. 点击取消按钮，将返回null

11. 打开新窗口（window.open）

window.open([URL], [窗口名称], [参数字符串])

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
    1.该名称由字母、数字和下划线字符组成。
    2."_top"、"_blank"、"_self"具有特殊意义的名称。
       _blank：在新窗口显示目标网页
       _self：在当前窗口显示目标网页
       _top：框架网页中在上部窗口中显示目标网页
    3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
   4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

12. 关闭窗口（window.close）

• window.close();   //关闭本窗口

• <窗口对象>.close();   //关闭指定的窗口

13.HTML文档可以说由节点构成的集合，三种常见的DOM节点:

1. 元素节点：上图中、、

   等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如
3. ...
中的JavaScript、DOM、CSS等文本。
4. 属性节点:元素属性，如标签的链接属性href="http://www.imooc.com"。

14. 通过ID获取元素

document.getElementById("id") 

直接输出获取的对象，结果:null或[object HTMLParagraphElement]

15. innerHTML 属性用于获取或替换 HTML 元素的内容

Object.innerHTML

16. HTML DOM 允许 JavaScript 改变 HTML 元素的样式

Object.style.property=new style;

property：

Hello World!

17. 显示和隐藏的效果，可通过display属性来设置

Object.style.display = value

18. 控制类名（className 属性）

object.className = classname

1. 获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观

19.在 JavaScript 中有 5 种不同的数据类型：

string 、number 、boolean 、object 、function

3 种对象类型：

Object 、Date 、Array

2 个不包含任何值的数据类型：

null 、undefined

20. 短路或  “||”  如果第一项是true 则结果为true 如果第一项为false 结果 为第二项（第二项不做计算直接返回）

21. 在浏览器控制台执行以下代码，输入的结果是（）

4400 4401 4399 4400

解析：

       首先，题中定义了一个函数，名为test，这个函数内部分别又定义了一个数值变量n和一个闭包函数add，test函数的最后一行代码return{n:n,add:add}，实际上是返回了一个object，而这个object中有一个属性n，它的值是n，还有一个方法add，它的值是add。

       好了，函数解释清楚，再来看输出的问题。函数外部分别定义了两个变量，result和result2，他们都指向test函数，但是分属两个不同的作用域，这也就解释了答案中1和4,4不会在2的基础上继续n++。

       1和2属于闭包函数的问题，可参考阮一峰老师的一篇博文（http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html），简单易懂，借用阮老师博客中所写，闭包的两个最大的用处：一个是可以读取到函数内部的变量，另一个就是让这些变量的值始终保持在内存中，具体可以测试。第二个用途就解释了同一个作用域中答案2会在1的基础上进行+1操作。

       答案3是比较令人困惑的一项，追本溯源，前面提到过第6行代码返回了一个有着值为n的属性n和值为add的方法add的匿名对象，在这里，在这个匿名对象中，属性n和方法add是互不相关的，即使在闭包add中改变了变量n的值，result.n的值依然不变。

       以上，首答，说了下自己的理解，有不对的地方还望指正。

https://www.nowcoder.com/questionTerminal/4e856ed3a0f24e77b67134888fadc964

22.JavaScript实现继承共6种方式：

原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承。

23. for(var i=0,j=0;i<10,j<6;i++,j++)

for循环第二项是逗号分隔的表达式，其返回值是数个表达式的最后一项，起决定作用的是j<6

24. == 操作符：先转类型，再比较

25. JavaScript是单线程的，浏览器实现了异步的操作，整个js程序是事件驱动的，每个事件都会绑定相应的回调函数

26. Promise/A+规范

• 一个 promise 可能有三种状态：等待（pending）、已完成（fulfilled）、已拒绝（rejected）
• 一个 promise 的状态只可能从 “等待” 转到 “完成” 态或者 “拒绝” 态，不能逆向转换，同时 “完成” 态和 “拒绝” 态不能相互转换
• promise 必须实现 then 方法（可以说，then 就是 promise 的核心），而且 then 必须返回一个 promise，同一个 promise 的 then 可以调用多次，并且回调的执行顺序跟它们被定义时的顺序一致
• then 方法接受两个参数，第一个参数是成功时的回调，在 promise 由 “等待” 态转换到 “完成” 态时调用，另一个是失败时的回调，在 promise 由 “等待” 态转换到 “拒绝” 态时调用。同时，then 可以接受另一个 promise 传入，也接受一个 “类 then” 的对象或方法，即 thenable 对象。

27. js如何判断一个对象是不是Array

typeof 操作符

对于Function， String， Number ，Undefined 等几种类型的对象来说，他完全可以胜任，但是为Array时你会收到一个object 的答案

instanceof 操作符

JavaScript中instanceof运算符会返回一个 Boolean 值，指出对象是否是特定类的一个实例。 使用方法：result = object instanceof class

但是对于array来说，有跨frame对象构建的问题

正确答案：

Object.prototype.toString.call(obj) === '[object Array]';

call改变toString的this引用为待检测的对象，返回此对象的字符串表示，然后对比此字符串是否是'[object Array]'，以判断其是否是Array的实例。也许你要问了，为什么不直接o.toString()？嗯，虽然Array继承自Object，也会有toString方法，但是这个方法有可能会被改写而达不到我们的要求，而Object.prototype则是原始的，所以能一定程度保证其“纯洁性”

28.JavaScript RegExp 对象有3个方法：test()、exec()、compile()

• test()：检测一个字符串是否匹配某个正则表达式，如果匹配成功，返回true，否则返回false；
• exec()：检索字符串中与正则表达式匹配的值，返回一个数组，存放匹配的结果；如果未找到，返回null；
• compile():可以在脚本执行过程中编译正则表达式，也可以改变已有表达式。

注：match是支持正则表达式的String对象的方法

29. js基本数据类型

Number Null Undefined String Boolean

纳尼USB

复杂类型：object array date regexp function

30. 判断对象myObj是否存在的写法

myobj是一个对象，只是存在与不存在的问题，几种表示方法：

1、！obj

2、！window.obj

3、typeof myObj == "undefined（判断对象是否有定义，已定义未赋值，返回true）

4、myObj == undefined（已定义未赋值。返回true）

5、myObj === undefined （已定义未赋值，返回true）

6、!this.hasOwnProperty('myObj'))（判断是否为顶层对象的一个属性）

7、myobj == null（注意null与undefined的区别，ull指的是已经赋值为null的空对象，即这个对象实际上是有值的，而undefined指的是不存在或没有赋值的对象。）

31. hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。

32.Ajax技术核心就是XMLHttpRequest对象。是一门提供网页局部刷新的技术。

Ajax最大的优点是在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。

Ajax技术的工作原理：可以分成3步

1.创建Ajax对象：var xhr = new XMLHttpRequest();

2.xhr 发送请求：xhr.open('get','test.html','true');

                          xhr.send();

3.xhr获取响应：

                          xhr.onreadystatechange = function(){

                                   if(xhr.readystate == 4){//请求的状态码

                                                       /*

                                                                   0:请求还没有建立（open执行前）

                                                                   1：请求建立了还没发送（执行了open）

                                                                    2：请求正式发送（执行了send）

                                                                   3：请求已受理，有部分数据可以用，但还没有处理完成

                                                                 4：请求完全处理完成

                                                           */

                                         alert(xhr.responseText);//返回的数据

                                     }

                             }

33. requestAnimationFrame是浏览器定时循环操作的一个接口，不是同步操作，for循环执行完后才会执行它的callback

34. JS解析顺序

 以下代码执行后， num 的值是？
var foo;//foo#1
var foo=function(x,y){//foo#3//function expression NOT hoisted函数表达式不会被提升 
return x-y;
}
function foo(x,y){//foo#2//function declaration hoisting函数声明提升 
return x+y;
}
var num=foo(1,2); 

匿名函数，需要通过变量引用指向函数的运行结果。

var foo=function(x,y){      //赋值式函数

return x-y;

}

有名函数，可以单独定义。

function foo(x,y){         //声明式函数

return x+y;

}

规则

1. 变量声明、函数声明都会被提升到作用域顶处；
2. 当出现相同名称时，优先级为：变量声明(foo#1) < 函数声明(foo#2) < 变量赋值(foo#3)

35. ◎Math.ceil()向上取整，即它总是将数值向上舍入为最接近的整数；
◎Math.floor()向下取整，即它总是将数值向下舍入为最接近的整数；
◎Math.round()标准取整，即它总是将数值四舍五入为最接近的整数(这也是我们在数学课上学到的舍入规则)

36. 常见的不支持冒泡事件：

1. focus
2. blur
3. mouseenter
4. mouseleave
5. load
6. unload
7. resize

37. javascript系统方法

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

unEscape：返回字符串ASCI码；可对通过 escape() 编码的字符串进行解码。

escape：返回字符的编码；对字符串进行编码，这样就可以在所有的计算机上读取该字符串。

parseFloat() 函数可解析一个字符串，并返回一个浮点数。

该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。

38. exec() 方法是一个正则表达式方法。

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

js还有一个test()方法，用于检测字符串是否匹配某个模式，返回值为boolean

39.

//这种是原型的重写第一种 没实例化重写原型

function Person(){};
Person.prototype = {
add :function(){
alert(this.name);
},
name :"aty"
}
var p2 =new Person();

p2.add();//aty 不报错 不信你们可以敲一下代码

原因：重写原型对象切断了现有原型与任何之前

已经存在的实例之间的联系，他们引用的仍然是最初的原型

我们仔细看看这句话，我们并没有在重写原型之前实例化，所以对于实例p2来说 这里依然是相对最初原型

//第二种原型重写 也就是先实例化再重写原型
function Person(){};
var p2 =new Person();
Person.prototype = {
add :function(){
alert(this.name);
},
name :"aty"
};
p2.add();//error
//这里会报错 原因：重写原型对象切断了现有原型与任何之前
已经存在的实例之间的联系，他们引用的仍然是最初的原型
function A() {
this.do=function() {return ‘foo’;};
};
A.prototype=function() {
this.do=function() {return ‘bar’};
};
var x=new A().do();
//很显然这里是第一种而不是第二种 这个时候你是不是在想
为什么是 "foo",不是"bar"呢，你看看
原型上的方法一般怎么写 是A.prototype.方法名
如A.prototype.show=function(){},然后再通过
再通过实例.show()才可以调用，这里直接将原型重写成一个函数

就算修正了constructor，也没有用，

（2019-2-21: 14:36 更正 如下内容）

有A.prototype.do吗显然没有，

于是又开始到实例上找有do方法吗

--------------------分割线-----------------------

此处应为  实例上有do 方法吗  

有的 所以返回"foo"

40.发送邮件

mailto后为收件人地址； tel最常用js一键拨号;

41. 注意区分属性和方法，也即有没有()括号。

node节点有几个常用的属性：

• firstChild
• lastChild
• nextSibling：下一个兄弟节点
• previousSibling：前一个兄弟节点
• parentNode：父节点

这些都是属性，都不需要添加括号的。

42.

typeof  1; //'number'
typeof (1);//'number'
typeof (); //SyntaxError 语法错误

void  0; //undefined
void (0);//undefined
void (); //SyntaxError 语法错误

43.undefined既是一种数据类型，在浏览器中又是作为全局变量存在的，也就是window对象下的一个属性。

console.log('undefined' in window); // 输出：true

使用in关键字可以校验某个对象下是否存在某个属性。这里的意思就是undefined属性是否在window对象下存在。

控制台会输出布尔值t