javascript是一门重要弱范例的言语，因为它是web浏览器的言语，它与浏览器的连系使他成为世界上最盛行的编程言语之一。
js汗青
Nombas 和 ScriptEase
大概在 1992 年，一家称作 Nombas 的公司开辟了一种叫做 C 减减（C-minus-minus，简称 Cmm）的嵌入式剧本言语。Cmm 背地的理念很简朴：一个充足壮大可以替换宏操纵（macro）的剧本言语，同时坚持与 C （和 C ++）充足的相似性，以便开辟人员能很快学会。这个剧本言语捆绑在一个叫做 CEnvi 的同享软件中，它初次向开辟人员展现了这类言语的威力。
Nombas 终究把 Cmm 的名字改成了 ScriptEase，原因是背面的部份（mm）听起来过于悲观，同时字母 C “使人畏惧”。
如今 ScriptEase 已成为了 Nombas 产物背地的重要驱动力。
Netscape 发清楚明了 JavaScript
当 Netscape Navigator 崭露锋芒时，Nombas 开辟了一个可以嵌入网页中的 CEnvi 的版本。这些初期的实验被称为 Espresso Page（浓咖啡般的页面），它们代表了第一个在万维网上运用的客户端言语。而 Nombas 涓滴没有推测它的理念将会成为万维网的一块重要基石。
当网上冲浪愈来愈盛行时，关于开辟客户端剧本的需求也逐步增大。此时，大部份因特网用户还仅仅经由历程 28.8 kbit/s 的调制解调器衔接到收集，纵然这时刻网页已不断地变得更大和更庞杂。而越发加重用户痛楚的是，仅仅为了简朴的表单有效性考证，就要与服务器举行屡次地往复交互。设想一下，用户填完一个表单，点击提交按钮，等待了 30 秒的处置惩罚后，看到的倒是一条通知你遗忘填写一个必要的字段。
当时正处于技术革新最前沿的 Netscape，最先仔细斟酌开辟一种客户端剧本言语来处理简朴的处置惩罚题目。
当时事情于 Netscape 的 Brendan Eich，最先动手为行将在 1995 年刊行的 Netscape Navigator 2.0 开辟一个称之为 LiveScript 的剧本言语，当时的目标是在浏览器和服务器（原本要叫它 LiveWire）端运用它。Netscape 与 Sun 实时完成 LiveScript 完成。
就在 Netscape Navigator 2.0 行将正式宣布前，Netscape 将其更名为 JavaScript，目标是为了应用 Java 这个因特网时兴辞汇。Netscape 的赌注终究取得报答，JavaScript 今后变成了因特网的必备组件。
javascript的函数（重要）基于词法作用域(lexical scoping)的顶级对象。
hello world
demo.html
<!DOCTYPE html>
<html>
<head>
<title>javascript demo</title>
</head>
<body>
<pre>
<script type="text/javascript" src="demo.js"></script>
</pre>
</body>
</html>
demo.js
document.writeln('hello world')<!DOCTYPE html>
<html>
<head>
<title>html text</title>
</head>
<body>
<script type="text/javascript">
document.write('hello js')
</script>
</body>
</html>
<!-- javascript 临盆平常文本和标签 -->
<!DOCTYPE html>
<html>
<!-- javascript 临盆平常文本和标签 -->
<head>
<title>html text</title>
</head>
<body>
<script type="text/javascript">
document.write('<h1>hello js</h1>')
</script>
</body>
</html>
<!-- javascript head 部份 onload事宜 -->
<!DOCTYPE html>
<html>
<!-- javascript head 部份 onload事宜 -->
<head>
<title>html text</title>
<script type="text/javascript">
function msg(){
alert("onload event on head parts")
}
</script>
</head>
<body onload="msg()">
</body>
</html>
<!-- javascript 点击事宜挪用函数 -->
<!DOCTYPE html>
<html>
<!-- javascript 点击事宜挪用函数 -->
<head>
<title>html text</title>
<script type="text/javascript">
function myFun(){
<!--JavaScript 语句向浏览器发出的敕令。语句的作用是通知浏览器该做什么。下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "Hello World",在 JavaScript 中，用分号来终了语句是可选的。-->
document.getElementById('demo').innerHTML='My html'
}
</script>
</head>
<body>
<p id = "demo">My link</p>
<button type="button" onclick="myFun()">try it</button>
</body>
</html>
<!-- 请运用 document.write() 仅仅向文档输出写内容。假如在文档已完成加载后实行 document.write，全部 HTML 页面将被掩盖-->
<!DOCTYPE html>
<html>
<!-- 请运用 document.write() 仅仅向文档输出写内容。假如在文档已完成加载后实行 document.write，全部 HTML 页面将被掩盖-->
<head>
<title>html text</title>
</head>
<body>
<p id = "demo">My msg</p>
<button type="button" onclick="myFun()">try it</button>
<script type="text/javascript">
function myFun(){
document.write('output msg,then whole page will be overide')
}
</script>
</body>
</html>
<!-- 你可以在文本字符串中运用反斜杠对代码行举行换行。-->
<!DOCTYPE html>
<html>
<head>
<title>html text</title>
</head>
<body>
<script type="text/javascript">
document.write('hi \
jim')
</script>
</body>
</html>
<!-- 变量是存储信息的容器 -->
<!DOCTYPE html>
<html>
<head>
<title>html</title>
<script type="text/javascript">
function fun() {
var num1 = 1;
var num2 = 2;
var num3 = num1 + num2;
document.write(num3);//点击try it按钮，打出盘算效果 3
}
</script>
</head>
<body>
<button type="button" onclick="fun()">try it</button>
</body>
</html>
<!-- js建立数组 -->
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
var cars = new Array();
cars[0] = 'aodi';
cars[1] = 'baoma';
cars[2] = 'benchi';
for(var i = 0;i<cars.length;i++){
document.write(cars[i]+'<br/>')
}
</script>
</body>
</html>
<!-- js建立对象而且猎取对象 -->
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
var cars = {
'name1':'baoma',
'name2':'aodi',
'name3':'dazhong'
}
document.write(cars.name1)
</script>
</body>
</html>
1,语法
1.1 空格
var that = this;
var 和that之间的空缺不能移除，然则其他的空格都是可以移除的。
诠释
js的诠释有两种要领：/ / 和//
/ var rm_a = /a/.match(s) */就会致使毛病，所以平常诠释用//.
1.2 标识符
标识符有一个字母开首，可以选择性的加上一个或是多个字母，数字或下划线，然则不能运用下面的保存字
abstract,boolean,break,byte,case,catch,char,class,const,continue,debugger,default,delete,do,double,else,enum,export,extends,false,final,finally,float,for,function,goto,if,implements,import,in,instanceof,int,interface,long,native,new,null,package,private,protected,public,return,short,static,super,switch,synchronized,this,throw,thransient,true,try,typeof,while,with
2,对象
js中，对象是可变的键控鸠合(keyed collections)，在js中，数组是对象，函数是对象，正则表达式是对象。
对象字面量:对象字面量供应了一种异常轻易的建立新对象值的表达法，一个对象字面量就是包围在一对花括号中的零或多个”键/值”对。
var name = {
"name1":"mike",
"name2":"mike2"
}对象也可以嵌套运用:
var flight = {
airline:"oceanic",
number:125,
departure:{
city:"beijing",
time:"2015/01/05"
},
arrival:{
city:"amrica",
time:"2015/01/06"
}
}2.1 对象的检索
检索对象中包含的值，可以采纳在[]后缀中括住一个字符串表达式。
name["name1"] //mike1
flight.arrival.city //amrica2.2属性值更新
name[“name1”] = “Jet li”
2.3援用通报对象
对象经由历程援用来通报
var = {},b = {},c = {}//a,b,c 都援用一个差异的空对象
a = b = c = {} //a b,c都援用同一个空对象
3.2 原型
http://www.crockford.com/java…
原型是一个对象，其他对象可以经由历程它完成属性继续。
每一个对象都衔接到一个原型对象，而且他可以从中可以继续属性，原型衔接在属性更新的时刻是不起作用的，原型衔接只用在检索的时刻才会被用到，假如我们尝试去猎取对象的某个属性值，且该对象没有此属性值，那末js会尝试从原型对象上猎取，假如也没找到，返回undefined，这个历程叫托付
typeof
typeof 运算符有一个参数，即要搜检的变量或值
var a = "str"; alert(typeof a);//string
var a = 'str'; alert(typeof 123);// number对变量或值挪用 typeof 运算符将返回以下值之一：
undefined - 假如变量是 Undefined 范例的
boolean - 假如变量是 Boolean 范例的
number - 假如变量是 Number 范例的
string - 假如变量是 String 范例的
object - 假如变量是一种援用范例或 Null 范例的为何 typeof 运算符关于 null 值会返回 “Object”。这实际上是 JavaScript 最初完成中的一个毛病，然后被 ECMAScript 沿用了。如今，null 被认为是对象的占位符，从而诠释了这一抵牾，但从技术上来讲，它仍然是原始值。
Undefined 范例
如前所述，Undefined 范例只需一个值，即 undefined。当声明的变量未初始化时，该变量的默许值是 undefined。
var str; console.log(str==undefined)//true
var str; console.log(typeof str)//undefinedNull 范例
另一种只需一个值的范例是 Null，它只需一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因而 ECMAScript 把它们定义为相称的。
var str = null; console.log(str==undefined)//true只管这两个值相称，但它们的寄义差异。undefined 是声清楚明了变量但未对其初始化时给予该变量的值，null 则用于示意还没有存在的对象（在议论 typeof 运算符时，简朴地引见过这一点）。假如函数或要领要返回的是对象，那末找不到该对象时，返回的一般是 null。
Boolean 范例
它有两个值 true 和 false （即两个 Boolean 字面量）。
纵然 false 不即是 0，0 也可以在必要时被转换成 false，如许在 Boolean 语句中运用二者都是平安的。
注重数值的示意法
var str = !0;console.log(str)//true
var str = !1;console.log(str)//falseNumber 范例
ECMA-262 中定义的最特别的范例是 Number 范例。这类范例既可以示意 32 位的整数，还可以示意 64 位的浮点数。
直接输入的（而不是从另一个变量接见的）任何数字都被看做 Number 范例的字面量。比方，下面的代码声清楚明了寄存整数值的变量，它的值由字面量 32 定义：
var num = 32;console.log(num)//32JavaScript 具有动态范例
JavaScript 具有动态范例。这意味着雷同的变量可用作差异的范例：
Undefined 和 Null
Undefined 这个值示意变量不含有值。
可以经由历程将变量的值设置为 null 来清空变量。
<!--可以经由历程null来清空对象-->
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
var cars='baoma';
document.write(cars+'<br/>')
cars = null;
document.write(cars)
alert(cars==undefined)//true
</script>
</body>
</html>声明变量范例
当您声明新变量时，可以运用症结词 “new” 来声明其范例：
<!DOCTYPE html>
<html>
<!-- 声明新变量时，可以运用症结词 "new" 来声明其范例 -->
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
var str = new String;
var bo = new Boolean;
var num = new Number;
var cars = new Array;
var person = new Object;
alert(typeof str)
alert(typeof bo)
alert(typeof num)
alert(typeof cars)
</script>
</body>
</html>建立 JavaScript 对象
JavaScript 中的险些一切事件都是对象：字符串、数字、数组、日期、函数，等等。
对象（object）定义为“属性的无序鸠合，每一个属性寄存一个原始值、对象或函数”。严格来讲，这意味着对象是无特定递次的值的数组。
面向对象言语的请求
一种面向对象言语须要向开辟者供应四种基本才：
封装 - 把相干的信息（不管数据或要领）存储在对象中的才
群集 - 把一个对象存储在另一个对象内的才
继续 - 由另一个类（或多个类）得来类的属性和要领的才
多态 - 编写能以多种要领运转的函数或要领的才对象由特征（attribute）组成，特征可以是原始值，也可以是援用值。假如特征寄存的是函数，它将被看做对象的要领（method），不然该特征被看做对象的属性（property）。
你也可以建立本身的对象。
<!DOCTYPE html>
<html>
<!-- 建立 JavaScript 对象-->
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
var person= new Object();
person.name1='mike';
person.age=23;
person.color1 = 'yellow';
document.write('A person named '+ person.name1+' is '+ person.age +' years old')
</script>
</body>
</html>接见对象的属性和要领
<!DOCTYPE html>
<html>
<!--接见对象的属性和要领-->
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
var str = 'Hellojs'
document.write('Len: '+str.length+' <br/>Up: '+str.toUpperCase())
</script>
</body>
</html>挪用带参数的函数
在挪用函数时，您可以向其通报值，这些值被称为参数。
变量和参数必需以一致的递次涌现。第一个变量就是第一个被通报的参数的给定的值，以此类推。
<!DOCTYPE html>
<html>
<!--JavaScript 挪用带参数的函数-->
<head>
<title>html</title>
<script type="text/javascript">
function fun(name,title){
alert(name+' is a great '+title)
}
</script>
</head>
<body>
<button type = 'button' onclick="fun('bill','leader')">click</button>
</body>
</html>带有返回值的函数
在运用 return 语句时，函数会住手实行，并返回指定的值。
<!DOCTYPE html>
<html>
<!--JavaScript 挪用带参数的函数-->
<head>
<title>html</title>
<script type="text/javascript">
function re(){
var num = 4;
return num;
}
// return 返回4
function fun(){
document.getElementById('demo').innerHTML=re()
}
</script>
</head>
<body>
<p id="demo">Here is the content will be changed</p>
<button type = 'button' onclick="fun()">click</button>
</body>
</html>部分 JavaScript 变量
在 JavaScript 函数内部声明的变量（运用 var）是部分变量，所以只能在函数内部接见它。（该变量的作用域是部分的）。
可以在差异的函数中运用称号雷同的部分变量，因为只需声明过该变量的函数才识别出该变量。
只需函数运转终了，当地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的一切剧本和函数都能接见它。
向未声明的 JavaScript 变量来分派值
假如把值赋给还没有声明的变量，该变量将被自动作为全局变量声明。
将声明一个全局变量，纵然它在函数内实行。
函数支撑闭包
函数支撑闭包，也即是说，函数可以运用函数以外定义的变量。
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
var say = 'hello world'
function fun(){
alert(say)
}
fun()
</script>
<!-- 在上面这段代码中，剧本被载入内存后，并没有为函数 fun() 盘算变量 say 的值。该函数捕捉 say 的值只是为了今后的运用，say 将在函数挪用 fun() 时（末了一行）被赋值，显现音讯 "hello world"。-->
</body>
</html>JavaScript 运算符
假如把数字与字符串相加，效果将成为字符串。
逗号运算符
用逗号运算符可以在一条语句中实行多个运算。常用在变量声明中。
var iNum1 = 1, iNum = 2, iNum3 = 3;JavaScript Switch 语句
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<p id="demo"><p>
<button type="button" onclick='fun()'>try it</button>
<script type="text/javascript">
function fun(){
var str =''
var day = new Date().getDay();
switch(day)//注重day返回的是礼拜几，也就是数字0-6
{
case 1:
str = 'today is mon'
break
case 2:
str = 'today is Tus'
break
case 3:
str = 'today is wens'
break
case 4:
str = 'today is thus'
break
case 5:
str = 'today is fri'
break
case 6:
str = 'today is sat'
break
case 7:
str = 'today is sun'
break
default:
str='expecting weekends'
}
document.getElementById('demo').innerHTML=str;
}
</script>
</body>
</html>for轮回
<!DOCTYPE html>
<html>
<head>
<title>html</title>
<!-- javascript 遍历对象属性 -->
</head>
<body>
<p id="demo"><p>
<button type="button" onclick='fun()'>try it</button>
<script type="text/javascript">
var i;
var txt = ''
function fun(){
var person = {'name':'bill','age':'23','cookie':'true','single':'true'}
for(i in person){
txt+=i+'<br/>'
}
document.getElementById('demo').innerHTML=txt;
}
</script>
</body>
</html>do/while
<!DOCTYPE html>
<html>
<head>
<title>html</title>
<!-- javascript do/while -->
</head>
<body>
<p id="demo"><p>
<button type="button" onclick='fun()'>try it</button>
<script type="text/javascript">
var i = 0;
var txt = '';
function fun(){
do
{
txt+= 'js running the '+i+'times'+'<br/>'
i++
}
while(i < 5)
document.getElementById('demo').innerHTML = txt;
}
</script>
</body>
</html>while 遍历数组
<!DOCTYPE html>
<html>
<head>
<title>html</title>
<!-- javascript do/while 遍历数组 -->
</head>
<body>
<p id="demo"><p>
<script type="text/javascript">
var i = 0;
var cars = ['baoma','benchi','qq','aodi']
while(cars[i]){
document.write(cars[i]+'<br/>')
i++
}
</script>
</body>
</html>try/catch
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<script>
function myFunc() {
try {
var x = document.getElementById('inputName').value;
if (x == '') throw 'the input number should not be empty';
if (isNaN(x)) throw 'the input content should be number';
if (x < 5) throw 'the number was too small';
if (x > 10) throw 'the number was too large';
} catch (err) {
var y = document.getElementById('miss');
y.innerHTML = 'error ' + err;
}
}
</script>
<input type="text" id='inputName'>
<button type='button' onclick='myFunc()'>click</button>
<p id='miss'></p>
</body>
</html>
经由历程标署名查找 HTML 元素
getElementsByTagName
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<div id = 'main'>
<span>this is the first doc</span>
<p>this is the second doc</p>
<p>this is the third doc</p>
</div>
<script>
var x = document.getElementById('main');
var y = x.getElementsByTagName('p');
document.write('The first doc is '+y[0].innerHTML)
</script>
</body>
</html>转变 HTML 内容
修正 HTML 内容的最简朴的要领时运用 innerHTML 属性。
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<p id='main'>this is the first doc</p>
<script>
document.getElementById('main').innerHTML='angularjs'
</script>
</body>
</html>转变 HTML 款式
如需转变 HTML 元素的款式，请运用这个语法：
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<p id='main'>this is the first doc</p>
<script>
document.getElementById('main').style.color='red'
</script>
</body>
</html>
点击变动html
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<p onclick="this.innerHTML='Thank you'">please click it</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<script>
function func(id){
id.innerHTML='Thank you!'
}
</script>
<p onclick="func(this)">please click it</p>
</body>
</html>
打印体系时候
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<p id='demo'></p>
<script>
function func(){
document.getElementById('demo').innerHTML= Date();
}
</script>
<button type='button' onclick="func()">please click it</p>
</body>
</html>
button和点击星散
<!DOCTYPE html>
<html>
<!-- 可以将点击按钮星散 -->
<head>
<title>html</title>
</head>
<body>
<button id='btm'>click here</button>
<script>
document.getElementById("btm").onclick = function() {
displayDate()
}
function displayDate() {
document.getElementById("demo").innerHTML = Date()
}
</script>
<p id="demo"></p>
</body>
</html>
onload事宜
<!DOCTYPE html>
<html>
<!-- onload 事宜搜检cookie是不是开启 -->
<head>
<title>html</title>
</head>
<body onload="checkCookies()">
<script type="text/javascript">
function checkCookies(){
if(navigator.cookieEnabled==true){
alert('cook enabled')
}else{
alert('cookie down')
}
}
</script>
</body>
</html>onchange事宜，点击脱离，输入内容大写
<!DOCTYPE html>
<html>
<!-- onchange事宜点击脱离，输入的英文变大写 -->
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
function func(){
var x = document.getElementById('demo');
return x.value = x.value.toUpperCase()
}
</script>
<input type="text" id="demo" onchange="func()">
</body>
</html>mouseover/mouseout
<!DOCTYPE html>
<html>
<!-- onmouseout onmouseover事宜点击脱离,变动款式 -->
<head>
<title>html</title>
</head>
<body>
<div onmouseover="mover(this)" onmouseout="mout(this)" style="background-color: green;height:100px;width:100px;text-align: center">what 's that</div>
<script type="text/javascript">
function mover(obj){
obj.innerHTML='THANK YOU'
}
function mout(obj){
obj.innerHTML='LEAVE'
}
</script>
</body>
</html>mouseup/mousedown
<!DOCTYPE html>
<html>
<!-- onmouseup onmousedown事宜点击脱离,变动款式 -->
<head>
<title>html</title>
</head>
<body>
<div onmouseup="mover(this)" onmousedown="mout(this)" style="background-color: green;height:100px;width:100px;text-align: center"></div>
<script type="text/javascript">
function mover(obj){
obj.innerHTML='please click mouse'
obj.style.backgroundColor='red'
}
function mout(obj){
obj.innerHTML='please release your mouse'
obj.style.backgroundColor='#ccc'
}
</script>
</body>
</html>当输入字段取得核心时，会触发转变背景色彩的函数。
<!DOCTYPE html>
<html>
<!-- onfocus 当输入字段取得核心时，会触发转变背景色彩的函数。-->
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
function func(obj){
// return obj.style.backgroundColor = 'yellow'
obj.style.background='red'//运用这两种体式格局都可以
}
</script>
<input type="text" onfocus="func(this)">
</body>
</html>建立新的 HTML 元素
如需向 HTML DOM 增加新元素，你必需起首建立该元素（元素节点），然后向一个已存在的元素追加该元素。
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<div id='main'>
<p id='p1'>the second para</p>
<p id='p2'>the second para</p>
</div>
<script type="text/javascript">
var p = document.createElement('p3')
var node = document.createTextNode('This is something new')
p.appendChild(node)
var e2 = document.getElementById('main')
e2.appendChild(p)
</script>
</body>
</html>
删除已有的 HTML 元素
如需删除 HTML 元素，你必需起首取得该元素的父元素
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<div id='main'>
<p id='p1'>the first para</p>
<p id='p2'>the second para</p>
<p id='p3'>the third para</p>
</div>
<script type="text/javascript">
var a1 = document.getElementById('main');
var a2 = document.getElementById('p1')
a1.removeChild(a2)
</script>
</body>
</html>javascript 面临对象
运用预定义对象只是面向对象言语的才的一部份，它真正壮大的地方在于可以建立本身专用的类和对象。
工场体式格局
原始体式格局
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
var person = new Object();
person.color = 'yellow';
person.hight = 230;
person.hands = 2;
//末了一个属性实际上是指向函数的指针，意味着该属性是个要领。实行这段代码后，就可以运用对象 car。
person.action = function(){
document.write(this.color);
}
person.action();
</script>
</body>
</html>工场形式
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
function createPerson(){
var person = new Object();
person.color = 'yellow';
person.hight = 230;
person.hands = 2;
person.action = function(){
document.write(this.color);
}
return person;
}
var person1 = createPerson();
var person2 = createPerson();
person1.action();
document.write('<br>')
person2.action();
</script>
</body>
</html>
返回 person 对象（person）作为函数值。挪用此函数，将建立新对象，并给予它一切必要的属性，复制出一个我们在前面申明过的 person 对象。因而，经由历程这类要领，我们可以很轻易地建立 person 对象的两个版本（person1 和 person2），它们的属性完整一样。工场形式通报参数
<!DOCTYPE html>
<html>
<!--给工场形式通报参数-->
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
function createPerson(skinColor,phsiHight,hanNum){
var person = new Object();
person.color = skinColor;
person.hight = phsiHight;
person.hands = hanNum;
person.action = function(){
document.write(this.color);
}
return person;
}
var person1 = createPerson('yellow',100,2);
var person2 = createPerson('black',130,2);
person1.action();
document.write('<br>')
person2.action();
</script>
</body>
</html>
给 createPerson() 函数加上参数，即可为要建立的 person 对象的 skinColor、phsiHight 和 hanNum 属性赋值。这使两个对象具有雷同的属性，却有差异的属性值将函数要领定义在工场函数表面
<!DOCTYPE html>
<html>
<!--在工场函数外定义对象的要领-->
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
function action(){
document.write(this.color)
}
function createPerson(skinColor,phsiHight,hanNum){
var person = new Object();
person.color = skinColor;
person.hight = phsiHight;
person.hands = hanNum;
person.action = this.action;
return person;
}
var person1 = createPerson('yellow',100,2);
var person2 = createPerson('black',130,2);
person1.action();
document.write('<br>')
person2.action();
</script>
</body>
</html>
<!-- 每次挪用函数 createPerson()，都要建立新函数 action()，意味着每一个对象都有本身的 action() 版本。而事实上，每一个对象都同享同一个函数。 -->组织函数要领
<!DOCTYPE html>
<html>
<!--组织函数要领-->
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
function Person(skinColor, phsiHight, hanNum) {
this.color = skinColor;
this.hight = phsiHight;
this.hands = hanNum;
this.action = function() {
document.write(this.color)
}
}
var person1 = new Person('yellow', 100, 2);
var person2 = new Person('black', 130, 2);
person1.action();
document.write('<br>')
person2.action();
</script>
</body>
</html>组织函数要领与工场体式格局的差异。
起首在组织函数内没有建立对象，而是运用 this 症结字。运用 new 运算符组织函数时，在实行第一行代码前先建立一个对象，只需用 this 才接见该对象。然后可以直接给予 this 属性，默许情况下是组织函数的返回值（没必要明白运用 return 运算符）。
如今，用 new 运算符和类名 Person 建立对象，就更像 ECMAScript 中平常对象的建立体式格局了。
就像工场函数，组织函数会重复天生函数，为每一个对象都建立自力的函数版本。不过，与工场函数相似，也可以用外部函数重写组织函数，同样地，这么做语义上无任何意义。这正是下面要讲的原型体式格局的上风地点。
原型体式格局
<!DOCTYPE html>
<html>
<!--原型体式格局-->
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
function Person(){//该体式格局应用了对象的 prototype 属性，可以把它算作建立新对象所依靠的原型。
//这里，起首用空组织函数来设置类名。然后一切的属性和要领都被直接给予 prototype 属性。
}
//经由历程给 Car 的 prototype 属性增加属性去定义 Car 对象的属性。
Person.prototype.color = 'yellow';
Person.prototype.hight = 100;
Person.prototype.hands = 2;
Person.prototype.action = function() {
document.write(this.color)
}
//挪用 new Person() 时，原型的一切属性都被马上给予要建立的对象，意味着一切 Person 实例寄存的都是指向 action() 函数的指针。从语义上讲，一切属性看起来都属于一个对象，因而处理了前面两种体式格局存在的题目。
var person1 = new Person();
var person2 = new Person();
person1.action();
document.write('<br>')
person2.action();
</script>
</body>
</html>夹杂的组织函数
<!DOCTYPE html>
<html>
<!--夹杂的组织函数-->
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
function Person(sinkColor,job,gender){
this.color = sinkColor;
this.title = job;
this.sex = gender;
this.numbers = new Array('bill','mike')
}
Person.prototype.show = function(){
document.write(this.title)
}
var person1 = new Person('yellow','ceo','man');
var person2 = new Person('red','dev','femal');
person1.numbers.push('iven');
document.write(person1.numbers)
document.write('<br>')
document.write(person2.numbers)
</script>
</body>
</html>字符串拼接，资本斲丧题目
var str = "hello ";
str += "world";实际上，这段代码在幕后实行的步骤以下：
建立存储 "hello " 的字符串。
建立存储 "world" 的字符串。
建立存储衔接效果的字符串。
把 str 的当前内容复制到效果中。
把 "world" 复制到效果中。
更新 str，使它指向效果。
每次完成字符串衔接都邑实行步骤 2 到 6，使得这类操纵异常斲丧资本。假如重复这一历程几百次，以至几千次，就会形成机能题目。处理要领是用 Array 对象存储字符串，然后用 join() 要领（参数是空字符串）建立末了的字符串。设想用下面的代码替代前面的代码：
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
var arr = new Array();
arr[0] = 'hello'
arr[1] = 'world'
var str = arr.join(',')
document.write(str)
</script>
</body>
</html>如许，不管数组中引入若干字符串都不成题目，因为只在挪用 join() 要领时才会发作衔接操纵。此时，实行的步骤以下：
建立存储效果的字符串
把每一个字符串复制到效果中的适宜位置
虽然这类处理方案很好，但另有更好的要领。题目是，这段代码不能确实反映出它的企图。要使它更轻易明白，可以用 StringBuffer 类打包该功用：
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
function StringBuffer(){
this._s_ = new Array();
}
StringBuffer.prototype.append = function(str){
this._s_.push(str)
}
StringBuffer.prototype.toString = function(){
return this._s_.join(",");
}
var buffer = new StringBuffer();
buffer.append('hello')
buffer.append('world')
var strs = buffer.toString()
document.write(strs)
</script>
</body>
</html>这段代码起首要注重的是 s 属性，本意是私有属性。它只需两个要领，即 append() 和 toString() 要领。append() 要领有一个参数，它把该参数附加到字符串数组中，toString() 要领挪用数组的 join 要领，返回真正衔接成的字符串。要用 StringBuffer 对象衔接一组字符串
<!DOCTYPE html>
<html>
<head>
<!-- 建立 Date 对象时，假如没有参数，给予对象的是当前的日期和时候。要盘算衔接操纵历经若干时候，把日期的毫秒示意（用 getTime() 要领的返回值）相减即可。这是权衡 JavaScript 机能的罕见要领 -->
<title>html</title>
</head>
<body>
<script type="text/javascript">
var d1 = new Date();
function StringBuffer(){
this._s_ = new Array();
}
StringBuffer.prototype.append = function(str){
this._s_.push(str)
}
StringBuffer.prototype.toString = function(){
return this._s_.join(",");
}
var buffer = new StringBuffer();
for(var i = 0;i<10000000;i++){
buffer.append('txt')
}
var strs = buffer.toString()
var d2 = new Date();
document.write('<h1>buffer time:</h1>')
document.write(d2.getTime()- d1.getTime())
for(var i = 0;i<10000000;i++){
var txt = txt + "txt";
}
var d3 = new Date();
document.write('<h1>str time:</h1>')
document.write(d3.getTime()-d2.getTime());
</script>
</body>
</html>
重命名已有的要领
可以给已有的要领名变动称号，比方可以给 Array 类增加两个要领 enq() 和 inq()，只让它们重复挪用已有的 push() 和 shift() 要领即可：
shift() 要领用于把数组的第一个元素从个中删除，并返回第一个元素的值。
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
Array.prototype.enq = function(v1){
return this.push(v1)
}
Array.prototype.inq = function(){
//shift() 要领用于把数组的第一个元素从个中删除，并返回第一个元素的值。
return this.shift();
}
var arr = new Array(3);
arr[0] = 'm1';
arr[1] = 'm2';
arr[2] = 'm3';
arr.enq('mike');
document.write(arr);
document.write('<br>')
arr.inq();
document.write(arr)
</script>
</body>
</html>
制造要领
indexOf() 要领可返回某个指定的字符串值在字符串中初次涌现的位置.然则Array没有indexof要领,这里可以给Array建立一个indexof要领
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<script type="text/javascript">
Array.prototype.indeof = function(v){
for(var i = 0;i<this.length;i++){
if(v==this[i]){
return i
}
}
return -1;
}
var arr = new Array('m1','m2','m3');
var str = arr.indeof('m2')
document.write(str)
</script>
</body>
</html>重定义已有要领
就像能给已有的类定义新要领一样，也可重定义已有的要领。如前面的章节所述，函数名只是指向函数的指针，因而可以轻松地指向其他函数。
<!DOCTYPE html>
<html>
<head>
<title>html</title>
<!-- 重定义已有要领 -->
</head>
<body>
<script type="text/javascript">
Function.prototype.toString = function(){//重定义toString要领，返回指定字符串
return'strings'
}
function sayHi(){
document.write('something')
}
document.write(sayHi.toString())
</script>
</body>
</html>从新定义toString要领，然则保存它的原始指针
<!DOCTYPE html>
<html>
<head>
<title>html</title>
<!-- 重定义已有要领
Function 的 toString() 要领一般输出的是函数的源代码。掩盖该要领，可以返回另一个字符串
不过，toString() 指向的原始函数怎么了呢？它将被无用存储单元接纳顺序接纳，因为它被完整烧毁了。没有可以恢复原始函数的要领，所以在掩盖原始要领前，比较平安的做法是存储它的指针，以便今后的运用。偶然你以至可能在新要领中挪用原始要领：-->
</head>
<body>
<script type="text/javascript">
Function.prototype.originalToString = Function.prototype.toString;//这个表达式的意义是存储它的指针
Function.prototype.toString = function(){
if(this.originalToString().length > 100){
return 'too long to display'
}else{
return this.originalToString();
}
}
function sayHi(){
alert('something')
}
document.write(sayHi.toString())
</script>
</body>
</html>javascript的继续机制的完成
选定基类后，就可以建立它的子类了。基类只是用于给子类供应通用的函数。在这类情况下，基类被看做抽象类。
只管 ECMAScript 并没有像其他言语那样严格地定义抽象类，但偶然它确实会建立一些不允许运用的类。一般，我们称这类类为抽象类。
建立的子类将继续超类的一切属性和要领，包含组织函数及要领的完成。记着，一切属性和要领都是公用的，因而子类可直接接见这些要领。子类还可增加超类中没有的新属性和要领，也可以掩盖超类的属性和要领。
继续的体式格局
和其他功用一样，ECMAScript 完成继续的体式格局不止一种。这是因为 JavaScript 中的继续机制并不是明白规定的，而是经由历程模拟完成的。这意味着一切的继续细节并不是完整由诠释顺序处置惩罚。作为开辟者，你有权决议最实用的继续体式格局。
1，对象假装
它是在开辟者最先明白函数的事情体式格局，尤其是如安在函数环境中运用 this 症结字后才发展出来。
<html>
<head>
<title>Example</title>
</head>
<!-- 组织函数运用 this 症结字给一切属性和要领赋值（即采纳类声明的组织函数体式格局）。因为组织函数只是一个函数，所以可以使 ClassA 组织函数成为 ClassB 的要领，然后挪用它。ClassB 就会收到 ClassA 的组织函数中定义的属性和要领。比方，用下面的体式格局定义 ClassA 和 ClassB： -->
<body>
<script type="text/javascript">
function ClassA(sColor) {
this.color = sColor;
this.sayColor = function() {
document.write(this.color)
};
}
function ClassB(Lor, sName) {
this.newMethod = ClassA;//因为组织函数只是一个函数，所以可以使 一个组织函数成为 另一个函数的要领
this.newMethod(Lor);
delete this.newMethod;//末了一行代码删除了对 ClassA 的援用，如许今后就不能再挪用它。
this.name = sName;
this.sayName = function() {
document.write(this.name)
};
}
var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();
document.write('<br>')
objB.sayColor();
document.write('<br>')
objB.sayName();
</script>
</body>
</html>对象假装可完成多重继续
UML
这里存在一个弊病，假如存在两个类 ClassX 和 ClassY 具有同名的属性或要领，ClassY 具有高优先级。因为它从背面的类继续。除这点小题目以外，用对象假装完成多重继续机制易如反掌。
因为这类继续要领的盛行，ECMAScript 的第三版为 Function 对象加入了两个要领，即 call() 和 apply()。
Call() 要领
<html>
<head>
<title>Example</title>
</head>
<!-- 组织函数运用 this 症结字给一切属性和要领赋值（即采纳类声明的组织函数体式格局）。因为组织函数只是一个函数，所以可以使 ClassA 组织函数成为 ClassB 的要领，然后挪用它。ClassB 就会收到 ClassA 的组织函数中定义的属性和要领。比方，用下面的体式格局定义 ClassA 和 ClassB： -->
<body>
<script type="text/javascript">
function ClassA(sColor) {
this.color = sColor;
this.sayColor = function() {
document.write(this.color)
};
}
function ClassB(Lor, sName) {
//this.newMethod = ClassA;
//this.newMethod(Lor);
//delete this.newMethod;
ClassA.call(this,Lor)//call() 要领是与典范的对象假装要领最相似的要领。它的第一个参数用作 this 的对象。其他参数都直接通报给函数本身。这里的this即是建立了新的ClassB对象，Lor关于两个类来讲都是唯一的参数
this.name = sName;
this.sayName = function() {
document.write(this.name)
};
}
var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();
document.write('<br>')
objB.sayColor();
document.write('<br>')
objB.sayName();
</script>
</body>
</html>var pet = {
words:'...',
speak: function(say){
console.log(say+''+this.words);
}
}
// pet.speak('speak') //speak ...
// this 指的是挪用这个要领的对象 pet
// 狗有本身的话，然则没有speak的要领
var dog = {
words:'wang'
}
// pet原本指向的是speak要领，然则call转变了实行上下文，pet 的speak就指向了dog
//dog 如今有了一个pet的妙技 speak
pet.speak.call(dog,'speak ')//speak wang call 完成继续
function pet (words) {
this.words = words;
this.speak = function(){
console.log(this.words)
}
}
function dog(words){
pet.call(this,words)//dog 没有speak要领，经由历程call(this) 继续了pet的speak要领
//pet.apply(this,arry) apply和call的区分在于apply通报的是一个参数列表
}
var dog = new dog('wang');
dog.speak();//wangapply要领
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
function ClassA(sColor) {
this.color = sColor;
this.sayColor = function() {
document.write(this.color)
};
}
function ClassB(Lor, sName) {
//this.newMethod = ClassA;
//this.newMethod(Lor);
//delete this.newMethod;
ClassA.apply(this,arguments)//第一个参数照样 this，第二个参数是只需一个值 Lor 的数组。可以把 ClassB 的全部 arguments 对象作为第二个参数通报给 apply() 要领：
this.name = sName;
this.sayName = function() {
document.write(this.name)
};
}
var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();
document.write('<br>')
objB.sayColor();
document.write('<br>')
objB.sayName();
</script>
</body>
</html>
//固然，只需超类中的参数递次与子类中的参数递次完整一致时才够通报参数对象。假如不是，就必需建立一个零丁的数组，根据准确的递次安排参数。call(),apply(),bind()的区分
<!DOCTYPE html>
<html>
<!-- 转变实行上下文,call, apply，bind, call 要领可将一个函数的对象上下文从初始的(初始值)上下文转变为由 thisObj 指定的新对象。
假如没有供应 thisObj 参数，那末 Global 对象被用作 thisObj。同apply相似，唯一区分是：
apply()把参数打包成Array再传入；
call()把参数按递次传入。-->
<body>
<script type="text/javascript">
var obj = {
log: function() {
alert(this.foo);
},
foo: 'foo'
};
var temp = {
foo:'bar'
};
obj.log.bind(temp)();//bar
obj.log.apply(temp);//bar
obj.log.call(temp);//bar
</script>
</body>
</html>比方，在举一个例子:
<!DOCTYPE html>
<html>
<!-- 在JS中，这三者都是用来转变函数的this对象的指向的，他们有什么样的区分呢。
在说区分之前照样先总结一下三者的相似的地方：
1、都是用来转变函数的this对象的指向的。
2、第一个参数都是this要指向的对象。
3、都可以应用后续参数传参。 -->
<head>
<title>比较apply,call,bind的区分</title>
</head>
<body>
<script type="text/javascript">
var o ={
name:'mike',
age:'20',
say: function(){
alert(this.name+' this year '+this.age+' years old')
}
}
var b = {
name:'mk',
age:'21'
}
o.say()
</script>
</body>
</html>
这段代码打印出来的肯定是mike this year 20 years old
<!DOCTYPE html>
<html>
<!-- 那末如何用 o 的say要领来显现 b 的数据呢。这是就须要挪用call,apply,bind -->
<head>
<title>比较apply,call,bind的区分</title>
</head>
<body>
<script type="text/javascript">
var o ={
name:'o data',
age:'20',
say: function(){
alert(this.name+' this year '+this.age+' years old')
}
}
var b = {
name:'b data',
age:'21'
}
// o.say()
alert('will display call b data')
o.say.call(b)
alert('will dispaly apply b data')
o.say.apply(b)
alert('will display bind b data')
o.say.bind(b)()
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<!-- call,apply直接挪用，bind要领返回的仍然是一个函数，因而背面还须要()来举行挪用才够。
call背面的参数与say要领中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和say要领中一一对应的，这就是二者最大的区分。
然则因为bind返回的仍然是一个函数，所以我们还可以在挪用的时刻再举行传参。-->
<head>
<title>比较apply,call,bind的区分</title>
</head>
<body>
<script type="text/javascript">
var object1 ={
name:"object1 data",
age:"20",
say: function(gender,job){
alert(this.name+" this year " + this.age +" years old "+ gender+ " in microsoft, as a/an "+ job)
}
}
var object2 = {
name:"object2 data",
age:"21"
}
// o.say()
alert('will display call object2 data');
object1.say.call(object2,"female","developer");
alert('will dispaly apply object2 data');
object1.say.apply(object2,["male","Technical Leader"]);
alert('will display bind object2 data');
object1.say.bind(object2)("female","CEO");
</script>
</body>
</html>原型链继续
<html>
<head>
<title>Example</title>
<!-- prototype 对象是个模板，要实例化的对象都以这个模板为基本。总而言之，prototype 对象的任何属性和要领都被通报给谁人类的一切实例。原型链应用这类功用来完成继续机制。 -->
</head>
<body>
<script type="text/javascript">
function ClassA() {
}
ClassA.prototype.color = 'red';
ClassA.prototype.sayColor = function() {
document.write(this.color)
}
function ClassB() {
}
ClassB.prototype = new ClassA();//把 ClassB 的 prototype 属性设置成 ClassA 的实例。
//挪用 ClassA 的组织函数，没有给它通报参数。这在原型链中是规范做法。要确保组织函数没有任何参数。
ClassB.prototype.name = 'mike'
ClassB.prototype.sayName = function() {
document.write(this.name)
}
var objA = new ClassA();
var objB = new ClassB();
objA.color = 'red'
objB.name = 'john'
objB.color = 'green'
objA.sayColor()
objB.sayColor()
objB.sayName()
</script>
</body>
</html>
夹杂继续机制
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
function ClassA(sColor) {
this.color = sColor;
}
ClassA.prototype.sayColor = function() {
alert(this.color);
};
function ClassB(sColor, sName) {
ClassA.call(this, sColor);//call()继续机制
this.name = sName;
}
ClassB.prototype = new ClassA();//原型链继续机制
ClassB.prototype.sayName = function() {
alert(this.name);
};
var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();
objB.sayColor();
objB.sayName();
</script>
</body>
</html>javasript中须要注重的一些题目
var obj = {name:'michael',age:'23',gender:'male'}
var txt = ''
for(var i in obj){//这里可以不加 var，直接写‘i’然则会把i 做为全局的变量 window.i
txt +=obj[i]//obj是一个对象，然则可以如许写 obj[i],因为鸠合也是对象。
}
console.log(txt)//michael23malejavascript页面加载革新就会自动实行部份剧本，请看下面demo
<ul>
<li>click me</li>
<li>click me</li>
<li>click me</li>
<li>click me</li>
</ul>
var eles = document.getElementsByTagName('li')
var len = eles.length;
for(var i = 0;i<len;i++){
eles[i].onclick = function(){
console.log(i)// 4 4 4 4
}
}
页面加载后会自动把剧本部份实行，实行完剧本，i=4. 当点击li触发onclick事宜 此时的i早已经是4 javascript 2种截取字符串的要领 substr 和 slice
var date = '2016-01-05'
date.slice(0,7)
date.substr(0,7)