Home > Web Front-end > JS Tutorial > body text

The most complete summary of JavaScript knowledge points

小云云
Release: 2018-01-17 11:33:12
Original
4220 people have browsed it

This article mainly shares with you the most complete summary of JavaScript knowledge points, hoping to help everyone.

1.JS object-oriented understanding

<span style="font-size: 14px;">面向对象的三大特点:继承、封装、多态<br>1、JS中通过prototype实现原型继承<br>2、JS对象可以通过对象冒充,实现多重继承,<br>3、Object类是所有Js类的基类<br>4、通过function对对象进行封装<br>5、通过使用arguments实现参数重载<br>6、ES6语法糖可以直接定义类class,继承对象extends<br></span>
Copy after login

2.JS data types

<span style="font-size: 14px;">1.基本数据类型:<br><br>Undefined:代表一切未知的事物,啥都没有,无法想象,代码也就更无法去处理了。<br>          注意:typeof(Undefined) 返回也是 Undefined。可以将Undefined赋值给任何变量或属性,但并不意味了清除了该变量,反而会因此多了一个属性。<br>    <br>Null:有那么一个概念,但没有东西。无中似有,有中还无。虽难以想象,但已经可以用代码来处理了。<br>     注意:typeof(Null)返回Object,但Null并非Object,具有Null值的变量也并非object。<br>    <br>Boolean:是就是,非就非,没有疑义。对就对,错就错,绝对明确。既能被代码处理,也可以控制代码的流程。<br><br>Number:线性的事物,大小和次序分明,多而不乱。便于代码进行批量处理,也控制代码的迭代和循环等。<br>       注意:typeof(NaN)和typeof(Infinity)都返回number 。NaN参与任何数值计算的结构都是NaN,<br>       而且 NaN != NaN 。Infinity / Infinity = NaN 。<br>    <br>String:面向人类的理性事物,而不是机器信号。人机信息沟通,代码据此理解人的意图等等,都靠它了。<br><br>2.引用数据类型:Object、Array、Function<br></span>
Copy after login

3. Several methods for JS to determine data type

<span style="font-size: 14px;">1、typeof<br>2、prototype<br>3、instanceof<br>4、constructor<br>5、Object.prototype.toString.call(a)<br>注意 : typeof null === Object<br></span>
Copy after login

4. Cognition of Object objects

<span style="font-size: 14px;">JS中所有的对象都继承自Object<br>创建一个新对象: <br><br>var person = new Object();<br>person.name = "狼狼的蓝胖子";<br>person.age = 25;<br><br>constructor属性是保存当前对象的构造函数,前面的例子中,constructor保存的就是Object方法。<br>hasOwnProperty方法接收一个字符串参数,该参数表示属性名称,用来判断该属性是否在当前对象实例中,而不是在对象的原型链中。<br>isPrototype方法接收一个对象,用来判断当前对象是否在传入的参数对象的原型链上<br></span>
Copy after login

4. Some methods for Array data Usage

<span style="font-size: 14px;">Concat() 连接两个或更多数组<br>splice(index,len,[item]) 删除元素,并向数组添加一个新元素。<br>Slice() 从某个已有的数组返回选定的元素<br>Join() 把数组的所有元素放入一个字符串,元素通过指定的分隔符进行分割<br>push() 在数组后添加元素,并返回新的长度<br>unshift() 在数组最前添加元素<br>pop() 删除数组最后一个元素并返回该元素的值<br>reverse() 颠倒数组中元素的顺序<br>shift() 删除并返回数组中第一个元素<br>sort() 对数组元素进行排序<br>toSource() 返回该对象的源代码<br>toString()  把数组转换为字符串并返回结果<br>toLocaleString() 把数组转换为本地数组,并返回结果<br>valueOf() 返回对象的原始值<br></span>
Copy after login

5. Understanding Function

<span style="font-size: 14px;">两种自定义函数的方法 1.function fnName(){}  2. var fnName=function(){}<br>函数的返回值:1.当函数无明确返回值时,函数返回undefined。2.有返回值返回。<br>函数的参数列表是可变的,数据类型也是任意数据类型,JS中有一个变量,argument可以访问所有传到函数内部的参数。<br>Js支持创建动态函数,动态函数必须用Function对象来定义。<br>创建动态函数的基本格式:<br>var 变量名 = new Function("参数1","参数2","参数n","执行语句");<br>var add = new Function("x", "y", "return(x+y)");<br>JavaScript不支持函数的重载。如果两个方法名字一样,即使参数个数不一样,那么后面定义的就会覆盖前面定义,调用方法时永远是调用后定义的那个。<br></span>
Copy after login

6.The principle of Ajax request

<span style="font-size: 14px;">通过XMLHttpRequest对象来向服务器发送异步请求,从服务器获取数据。然后用JavaScript来操作DOM而更新页面。<br>XMLHttpRequest是ajax的核心机制,它是IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是JavaScript可以及时的向服务器提出请求并及时响应。而不阻塞用    户。达到无刷新效果。由事件触发,创建一个XMLHttpRequest对象,把HTTP方法 (POST/GET)和目标URL以及请求返回后的回调函数设置到XMLHttpRequest对象,通过        XMLHttpRequest向服务器发送请求,请求发送后继续响应用户的界面交互,只有等到请求真正从服务器返回的时候才调用callback()函数,对响应数据进行处理。<br>Function ajax(){<br>If(window.XMLHttpRequest){<br>    Var xhr =new XMLHttpRequest();<br>    }else{<br>        Var xhr=new ActiveXObject(‘Microsoft.XMLHTTP’);<br>    }<br>    Xhr.onreadystatechange=function(){<br>    If(xhr.readState==4){}<br>    }<br>}<br></span>
Copy after login

7.JS closure (Closure)

<span style="font-size: 14px;">闭包就是能够读取其他函数内部变量的函数。由于在JavaScript语言中,只有函数的内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在函数内部的函数”。所以    在本质上,闭包就是讲函数内部和函数外部链接起来的一座桥梁。<br>闭包的用途:1.获取函数内部的局部变量。2.让这些变量始终保持在内存中。<br>注意:1.由于闭包会使得函数中的变量一直保存在内存中,所以不能滥用闭包,容易导致内存泄漏,影响网页性能,解决方法就是在退出函数之前,将不再使用的变量全部删除        (delete);2闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当        作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。<br></span>
Copy after login

8.How this works

<span style="font-size: 14px;">This总是指向一个对象,具体是运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境。<br>普通函数调用时,一般指向window对象;<br>对象方法调用时,指向该对象;<br>如果对象方法里有局部方法,里面的this会指向window对象;<br>在ES5模式下,this指向window的都会变成undefined;<br>Apply,call时,动态改变this<br></span>
Copy after login

9.Several types of inheritance in JS Method

<span style="font-size: 14px;">Prototype   原型继承<br>Call()<br>Apply()<br>//模拟extend<br> var extend=function(target,source){<br>     for(property in source)<br>     {<br>         if(target.hasOwnProperty(property))<br>         {<br>             target[property]=source[property];<br>         }else{<br>             target.property=source[property];<br>         }<br>     }<br>     return target;<br> }<br></span>
Copy after login

10. Prototype chain

<span style="font-size: 14px;">首先要理解原型<br>每个JS对象都有一个prototype原型属性,指向该对象继承的原型。<br>原型对象上有一个 constructor 属性,该属性指向的就是构造函数。<br>而实例对象上有一个 __proto__  属性,该属性也指向原型对象,并且该属性不是标准属性,不可以用在编程中,该属性用于浏览器内部使用。<br><br>原型链:其实就是有限的实例对象和原型之间组成有限链,就是用来实现共享属性和继承的。<br></span>
Copy after login

Related recommendations:

JavaScript knowledge point system summary

Some JavaScript knowledge points that are easy to make mistakes

One of the Javascript knowledge points you must know "Literals and corresponding types" description_javascript skills

The above is the detailed content of The most complete summary of JavaScript knowledge points. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template