1. 1. 基础
    1. 1.1. 变量
    2. 1.2. 对象
    3. 1.3. 原型 (prototype)
      1. 1.3.1. 原型方式的问题
      2. 1.3.2. 构造函数与原型混合
      3. 1.3.3. 动态原型
    4. 1.4. 数组
    5. 1.5. 函数
      1. 1.5.1. 变量提升
      2. 1.5.2. 参数调用与全局变量
      3. 1.5.3. 模拟函数重载
    6. 1.6. 闭包
  2. 2. 残枝碎叶
    1. 2.1. arguments和rest
    2. 2.2. 函数名使用括号或！

JavaScript 入门

基础

JavaScript数据类型:字符串、数字、布尔、数组、对象、Null、Undefined

贴一个样例

<!DOCTYPE html> // 指明文件类型
<html>
<body>
<script>  //标签，放在html中表示此段为JavaScript
function changeImage() {//函数
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
  {
  element.src="/i/eg_bulboff.gif";
  }
else
  {
  element.src="/i/eg_bulbon.gif";
  }
}
</script>

<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif"> 	//其中的id，onclick等为属性配置

</body>
</html>

变量

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

变量名:以字母开头，也可以是$和_开头，大小写敏感

变量声明的三种方式:

  • const 不可修改，必须初始化
  • var 如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
  • let 开头必须使用"use strict"; 块作用域(只在{}内可用),不存在变量提升,同一块作用域不能重复定义
'use strict'; 
(function() {
 var varTest = 'test var OK.';
 let letTest = 'test let OK.'; 
   { 
     var varTest = 'varTest changed.';
     let letTest = 'letTest changed.';
   }
 console.log(varTest); //输出"varTest changed."，内部"{}"中声明的varTest变量覆盖外部的letTest声明 
 console.log(letTest); //输出"test let OK."，内部"{}"中声明的letTest和外部的letTest不是同一个变量 
 }());

对象

ECMAScript 中只存在一种作用域 - 公用作用域,所有属性和方法默认都是公用的！

创建对象 var person={firstname:"Bill", lastname:"Gates", id:5566};
两种寻址方式：
name=person.lastname;
name=person["lastname"];

**ECMAScript中本地的对象都是从object 继承过来的，**可以通过对object的原型添加新的方法，使得本地对象都具有此方法

Object.prototype.valueof=function(){
  alert(this.valueof());
}
var num=15;
num.valueof();//输出15

原型 (prototype)

原型方式的问题

function Car() {
}

Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.drivers = new Array("Mike","John");
Car.prototype.showColor = function() {
  alert(this.color);
};

var oCar1 = new Car();
var oCar2 = new Car();

oCar1.drivers.push("Bill");

alert(oCar1.drivers);	//输出 "Mike,John,Bill"
alert(oCar2.drivers);	//输出 "Mike,John,Bill"

上面的代码中，属性 drivers 是指向 Array 对象的指针，
该数组中包含两个名字 “Mike” 和 “John”。
由于 drivers 是引用值，Car 的两个实例都指向同一个数组。

构造函数与原型混合

function Car(sColor,iDoors,iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.drivers = new Array("Mike","John");
}

Car.prototype.showColor = function() {
  alert(this.color);
};

var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);

oCar1.drivers.push("Bill");

alert(oCar1.drivers);	//输出 "Mike,John,Bill"
alert(oCar2.drivers);	//输出 "Mike,John"

所有的非函数属性都在构造函数中创建，意味着又能够用构造函数的参数赋予属性默认值了。
因为只创建 showColor() 函数的一个实例，所以没有内存浪费

动态原型

function Car(sColor,iDoors,iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.drivers = new Array("Mike","John");
  
  if (typeof Car._initialized == "undefined") {  //重点，typeof为变量类型判断
    Car.prototype.showColor = function() {
      alert(this.color);
    };
	
    Car._initialized = true;
  }
}

数组

var cars=new Array("Audi","BMW","Volvo");

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

var cars=["Audi","BMW","Volvo"];

函数

关键词 function 必须是小写的

function functionname()
{
这里是要执行的代码
}

变量提升

js会将变量全都提升在函数的顶部

function example(){
var x=9+y;
console.log(x);//结果 :9，undefined
var y="hello";

}

此时输出因为变量都被"提升"，所以输出y不会判错，但y是在其后被赋值，所以为undefined
可以理解为

funciton example(){
var x=9+y;
console.log(x);
y="hello";
}

参数调用与全局变量

  var color="blue";
 function changecolor(color){ 
	console.log(color);//undefined
	if(color=="blue"){ color="red"; }
    else{ color="green"; }
	console.log(color);//green
 } 
 changecolor();
 //changecolor(color);
 console.log(color);//blue

搜寻参数的机制:

first local then global,如果local没找到则到global中找。
如果函数parameter中没有定义color，函数中使用的color的值就是从global获取的“blue”；
如果函数parameter中定义了color，这就相当于新建了一个local变量，在怪兽兄例子中，
该parameter is initialized, but hasn’t been assigned a value, 此时color的值是undefined

模拟函数重载

由于javascript中并没有函数重载，可以利用arguments进行模拟函数重载
通过调用arguments中的length函数去判断参数个数进行”重载“

function method(){
	switch(arguments.length){
	case 0:
	alert(0);
	break;
	
	case 1:
	alert(arguments[0]*10);//参数调用,从0开始计数
	break;
	
	case 2:
	alert(arguments[0]+arguments[1]);
	break;
	
	default:
	break;
}

闭包

闭包，指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。

残枝碎叶

  • 注释方式与c语言相同
  • 其中src为source的缩写,外部脚本的URL可能的值有：

绝对URL-指向其他站点（src=“www.example.com/example.js”
相对URL-指向站点内的文件（src="/scripts/example.js"

  • 用反斜杠进行代码换行
document.write("Hello \
World!");
  • 如果在文档已完成加载后执行 document.write，整个 HTML 页面将被write覆盖
<body>

<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

<button onclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>

</body>

arguments和rest

  • arguments
    类数组对象,用于存储函数的全部参数,
    其中可调用length统计函数的参数个数（从0开始计数

  • rest
    js中函数允许接受任意个从参数,
    用于获取除了已经定义的参数之外的参数
    rest也有"数组用法": rest[0],rest.length
    rest只能写在最后面，之前还需要用...

function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

函数名使用括号或！

函数是一个对象，函数名是指向这个对象的指针。
函数名后面加上括号或者！就表示立即调用执行这个函数里面的代码。

(function fun(a,b,c)
{
    //…
}(1,2,3))//其后的1,2,3为函数执行时的参数

!function fun(a,b,c)
{
    //…
}(1,2,3)//同上
  • return 语句
    javascript 引擎会在行末添加分号
return ;//自动添加分号
{ name:'mz' };//语句无法执行

//正确写法
function method(){
   return {  //'{'表示语句尚未结束
	   name:'mz'
   };
}
  • “==“与”===”
    ==会将等号两边的值转为同一类型在进行比较
    ===直接进行比较，不进行类型的转换
    !==同理

参考文章:
http://www.w3school.com.cn/js/index.asp
https://blog.csdn.net/qq_16339527/article/details/53231725
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449926746982f181557d9b423f819e89709feabdb4000
https://blog.csdn.net/nfer_zhuang/article/details/48781671
https://blog.csdn.net/weixin_30637171/article/details/80744819

Site construction by John Doe usinghexo blog framework.
Home