要用面向对象的方式去编程，而不要用面向过程的方式去编程

对象是各种类型的数据的集合，可以是数字、字符串、数组、函数、对象……

对象中的内容以键值对方式进行存储

对象要赋值给一个变量

 var cat={ "name":"喵1", "age":4, "family":["喵爸","喵妈"], "speak":function(){ console.log("喵喵~"); }, "friend":{ "name":"喵2", "age":5 } }

上面是对象的字面量的创建方式，简单直接

除此之外，还有对象的构造函数的创建方式

 var cat=new Object();

还有JavaScript5新增的一种方式

该方式在老版本的浏览器中存在兼容性问题

 Object.create();

获取、设置、添加、修改对象的值：

对象.属性名=属性值

对象[ 属性名 ]=属性值

 var cat={ "name":"喵1", "age":4, "family":["喵爸","喵妈"], "speak":function(){ console.log("喵喵~"); }, "friend":{ "name":"喵2", "age":5 } } cat.name="喵喵1"; cat.age=6; cat.type="英短"; console.log(cat.name);//喵喵1 console.log(cat["age"]);//6 console.log(cat.type);//英短

删除对象的属性：

delete 对象.属性

 var cat={ "name":"喵1", "age":4, "family":["喵爸","喵妈"], "speak":function(){ console.log("喵喵~"); }, "friend":{ "name":"喵2", "age":5 } } cat.type="英短"; console.log(cat.type);//英短 delete cat.type; console.log(cat.type);//undefined

检测对象是否拥有某个属性：

属性名 in 对象

 var cat={ "name":"喵1", "age":4, "family":["喵爸","喵妈"], "speak":function(){ console.log("喵喵~"); }, "friend":{ "name":"喵2", "age":5 } } console.log("name" in cat);//true console.log("type" in cat);//false

对象的枚举，遍历对象中的各个属性

 var cat={ "name":"喵1", "age":4, "family":["喵爸","喵妈"], "speak":function(){ console.log("喵喵~"); }, "friend":{ "name":"喵2", "age":5 } } for(var p in cat){ console.log(p); //name age family speak friend }

 var cat={ "name":"喵1", "age":4, "family":["喵爸","喵妈"], "speak":function(){ console.log("喵喵~"); }, "friend":{ "name":"喵2", "age":5 } } for(var p in cat){ console.log(p+": "+cat[p]); console.log(p);//获取属性名 //console.log(cat.p);// 写法错误 console.log(cat[p]);//获取属性值 写法正确 console.log(cat["n"+"ame"]);//喵1 []中可以添加字符串的拼接等操作 }

匿名函数，如：

window.onload=function(){}

函数一次执行完毕之后，会将局部作用域和局部变量销毁，因此外部无法调用到

但函数本身并没有被销毁，可以进行多次调用执行

为什么要使用函数：

代码复用（自己的代码和别人的代码，如jquery）

统一修改和维护

增加程序的可读性

函数的本质：对象

定义方式：字面量定义、构造函数定义

//字面量定义function add(n1,n2){}//构造函数定义new Function("n1","n2","....");

函数和对象一样，可以添加属性和方法

function person(){ console.log("cyy");}//添加属性person.age=25;//添加方法person.speak=function(words){ console.log(words);}console.log(person.age);//25person.speak("hh~");//hh~person();//cyy

函数可以作为数据值使用：

作为数据值保存在一个变量中

var fn=function(){ return "这是一个函数";}console.log(fn());//这是一个函数console.log(fn);/*ƒ (){ return "这是一个函数";}*/

此时fn打印出来的就是函数本体

函数也可以作为参数来使用：

function fn(){ alert(1);}setTimeout(fn,1000);//此处需要传函数本体//此处不能加括号，如果加了括号，会立刻调用，而不是等到1秒之后

函数可以作为返回值使用：

function fn(){ return function(){ console.log("fn中的fn"); }}//调用var newFn=fn();newFn();//fn中的fn// 或者fn()();//fn中的fn

函数的三种定义方式

// 字面量方式 // function 声明 function add(){ } // var 赋值表达式 var add=function(){ }；//构造函数 var add=new Function("num1","num2","return num1+num2"); add();

区别：

字面量方式比构造函数方式简洁

最重要的是预解析的区别

funtion声明的函数，可以先调用，再创建

函数预解析的时候会提前定义

 add(); function add(){ return 1; }

用var赋值表达式创建的函数，如果先调用，再创建，会报错

因为var在预解析时赋值为undefined

 add(); var add=function(){ return 1; };

function声明和var赋值表达式声明，这两种都是很好的选择

构造函数过于复杂，不推荐使用

函数定义的位置

全局作用域下的函数，在哪里都能调用

add();function add(){ add();}add();function fn(){ add();}

局部作用域下的函数

 //fn(); 无法调用 function add(){ fn(); function fn(){ fn(); function fn3(){ fn(); } } function fn2(){ fn(); } } //fn(); 无法调用

里层可以访问外层的函数，外层不能访问里层的函数

代码块中定义的函数：

由于js中没有块级作用域，所以依然是处于全局作用域中

都会出现预解析中函数被提前声明

if(true){ function fn1(){ }}else{ function fn2(){ }}

改成下面这样就可以实现按照条件进行声明，也是因为预解析的机制

if(true){ var fn1=function (){ }}else{ var fn2=function fn2(){ }}

对象中的函数

使用对象.函数名进行调用

var person={ name:"cyy", setAge:function(age){ this.age=age;//this指向当前对象 }}person.setSex=function(sex){ this.sex=sex;}person.setAge(25);person.setSex("girl");console.log(person.age);//25console.log(person.sex);//girl

普通函数的调用：

命名函数的调用

function add(){}add();

匿名函数的调用：

如果直接在匿名函数后面加上括号进行调用，会报错

function(){ alert(1);}();//Uncaught SyntaxError: Unexpected token (

解决方法是，将这段匿名函数执行的代码，赋值给一个变量

var fn=function(){ alert(1);}();//1

第二种解决方法：

将函数用括号括起来，实现匿名函数自执行

(function(){ alert(1);})();//1

括号把整体括起来也能实现一样的效果

(function(){ alert(1);}());//1

或者在function前加上合法的字符也可以，如!+-~

!function(){ alert(1);}();//1

或者放在console.log里面

console.log(function(){ alert(1);}());

以上这些方式的共同目的，就是不让匿名函数的function在开头位置出现

递归调用：

自己调用自己

实现阶乘

function fn(num){ if(num<=1) return 1; return num*fn(num-1);}console.log(fn(5));/*return 5*fn(4)return 5*4*fn(3)return 5*4*3*fn(2)return 5*4*3*2*fn(1)return 5*4*3*2*1*/

匿名函数也是函数，当它自执行的时候，会创建自己的函数内部作用域，在执行完毕之后会被销毁，因此在外部无法访问到自执行的匿名函数内部

//此处创建函数内部作用域(function add(n1,n2){ return n1+n2;})();console.log(add(3,4));//在全局无法访问到函数内部的函数add

方法的调用：

对象中的方法，使用对象.方法名进行调用

var operation={ add:function(n1,n2){ return n1+n2; }, sub:function(n1,n2){ return n1-n2; }}console.log(operation.add(3,4));//7

以下这种也是方法，是点击浏览器时浏览器自动帮我们完成调用；

也可以使用方法调用的方式来进行调用

 document.onclick=function(){ alert(1); } document.onclick();//等同于点击屏幕的效果

关于对象中的属性，什么时候加引号，什么时候不加引号

对于合法的标识符，加不加引号都可以；

不合法的标识符，必须加引号，否则会引起报错

var operation={ add:function(n1,n2){ return n1+n2; },//合法的属性名可以不加引号 sub:function(n1,n2){ return n1-n2; }, "@":function(){ }//不合法的属性名，会引起报错，必须加引号}

合法的标识符，调用时使用对象.方法名即可

非法的标识符，调用时使用对象[ " 方法名 " ]

var operation={ add:function(n1,n2){ return n1+n2; },//合法的属性名可以不加引号 sub:function(n1,n2){ return n1-n2; }, "@":function(word){ alert(word); }//不合法的属性名，会引起报错，必须加引号}console.log(operation.add(2,5));//7console.log(operation["@"]("hh~"));//hh~

[ ] 加引号和不加引号的区别

var operation={ add:function(n1,n2){ return n1+n2; },//合法的属性名可以不加引号 sub:function(n1,n2){ return n1-n2; }, "@":function(word){ return word; },//不合法的属性名，会引起报错，必须加引号 key:function(n1,n2){ return "key~"; }}var key="add";console.log(operation.key(2,3));//key~console.log(operation["key"](2,3));//key~console.log(operation[key](2,3));//5

方法的链式调用

如jquery

$("p").html("html").css("color","red")....

对象中要使用链式调用，则方法中需要返回当前对象

var operation={ add:function(n1,n2){ console.log(n1+n2); return this; }, sub:function(n1,n2){ console.log(n1-n2); return this; }}operation.add(5,3).sub(4,2);//要保证operation.add(5,3)能够返回operation对象//就需要添加return this

 构造函数的调用：

构造函数命名时一般首字母大写

调用时用new+函数名，返回值是一个对象

function Person(){}var obj=new Person();

js中内置的构造函数，常见的有：

Object()new Object()Array()new Array()

通过new关键字来调用

用构造函数的方式定义对象和数组，并添加内容

var person=new Object();person.name="cyy";var arr=new Array();arr[0]=1;

函数的间接调用

.call   第一个参数是改变this的指向，后面传递参数的方式就是一个一个传

.apply   第一个参数是改变this的指向，后面传递参数的方式是通过数组来传递（或者类数组）

var name="cyy";var person={};person.name="cyy2";person.getName=function(){ return this.name;//此处的this指向person对象}console.log(person.getName());//直接调用 cyy2console.log(person.getName.call(window));//间接调用，此时this被指向了window，返回的是window.name cyyconsole.log(person.getName.apply(window));//间接调用 cyy

function add(n1,n2){ return n1+n2;}console.log(add(1,2));//直接调用 3console.log(add.call(window,1,2));//间接调用 3console.log(add.apply(window,[1,2]));//间接调用 3

function add(n1,n2){ return n1+n2;}var arr=[4,6];console.log(add.apply(window,arr));//10

只有函数拥有call和apply方法，两者唯一的区别在于它们的传参方式

函数的参数

参数传递的本质是将实参赋值给形参

参数的个数

1、形参个数=实参个数

function add(n1,n2){ return n1+n2;}console.log(add(3,5));

2、实参个数 < 形参个数

多用于有可选参数的情况

function pow(base,pow=2){ return Math.pow(base, pow);}console.log(pow(3));//9console.log(pow(3,3));//27

3、实参个数 > 形参个数

如果无法得知有多少个实参，可以使用arguments

arguments是一个类数组，用于保存实参的信息

通过arguments[index] 获取某一个参数

arguments.length 实参的个数

function add(){ if(arguments.length==0) return; var sum=0; for(var i=0,len=arguments.length;i<len;i++){ sum+=arguments[i]; } return sum;}console.log(add());//undefinedconsole.log(add(1,2,3,4,5));//15

arguments 是类数组，实质上还是对象

索引是数组下标，数字开头的变量名不合法，因此需要加引号

{ ‘0‘: 1, ‘1‘: 2, ‘3‘: 4, length: 3}

可以通过arguments来修改参数的值

function speak(m){ arguments[0]=""; return m;}console.log(speak("hh"));//空

arguments是每个函数中独有的，不会跨函数

function fn1(){ console.log(arguments);//Arguments [1, callee: ƒ, Symbol(Symbol.iterator): ƒ] function fn2(){ console.log(arguments);//Arguments [2, callee: ƒ, Symbol(Symbol.iterator): ƒ] } fn2(2);}fn1(1);

arguments.callee  指代函数本身

function add(){ console.log(arguments.callee);}add();

arguments.callee 常用于递归中

function factorial(num){ if(num==1) return 1; return num*factorial(num-1);}console.log(factorial(5));//120function factorial(num){ if(num==1) return 1; return num*arguments.callee(num-1);}console.log(factorial(5));//120

不过在严格模式下，不允许使用arguments.callee（也不允许不使用var声明变量）

此时的解决方法就是将函数赋值给一个变量，这样函数本身的名字不会影响调用

"use strict";var myfn=function factorial(num){ if(num==1) return 1; return num*factorial(num-1);}console.log(myfn(5));//120

实参的个数 arguments.length

形参的个数 函数名.length 或者arguments.callee.length

function add(n1,n2){ if(arguments.length != add.length) throw new Error("请传入"+add.length+"个参数！");}console.log(add(5));//Uncaught Error: 请传入2个参数！

什么做参数

1、没有参数

2、数字做参数

3、字符串（ 如选择DOM节点，$("p") ）

4、布尔值（保持函数的纯洁性，建议一个函数只做一件事情）

5、undefined（可选参数必须放在最后）

6、null

7、数组 

$.each(["a","b","c"],function(index,item)){ console.log(index);//0 1 2 console.log(item);//a b c}

8、对象

$.each({name:"cyy",age:24},function(index,item)){ console.log(index);//name age console.log(item);//cyy 24}

使用对象作为参数的好处（可以自由调换顺序）

function fn(obj){ var person={}; person.name=obj.name||"cyy"; person.age=obj.age||24; person.tel=obj.tel||110, person.addr=obj.addr||"China"; return person;}var cyy={ name: "cyy1", age:25}console.log(fn(cyy));//{name: "cyy1", age: 25, tel: 110, addr: "China"}

9、函数

回调函数，如 setTimeout(fn, time);

函数的返回值

return：

表示函数结束

将值返回

什么可以做返回值：

直接return ，返回值是undefined

数字

字符串 ：alert() 输出的都是字符串，会默认调用.toString() 方法

布尔值：常用于表单验证

null 和 undefined

数组

function add(n1,n2){ return [n1,n2,n1+n2];}console.log(add(5,6));//(3) [5, 6, 11]

对象

function fn(){ return { name:"cyy", age:25 }}

注意return后面不要换行，否则默认是分号，到此结束；于是后面的会报错

function fn(){ //return会默认后面是分号，结束 return { name:"cyy", age:25 }}

函数

需要用()()来调用

document.write() 执行时会调用.toString() 方法，尝试将结果转换为字符串形式

document.write([1,2,3]);//1,2,3document.write({ name:"cyy"});//[object Object]document.write({ name:"cyy", toString:function(){ return "hh~"; }});//hh~

function count(){ var num=1; return function(){ return num++; }}//每次调用count()时，num都会被初始化//并且return num++ 是先返回num，再执行++console.log(count()());//1console.log(count()());//1console.log(count()());//1//count()只执行了一次，因此num只初始化一次//后面能够每次都进行递增+1var fn=count();console.log(fn());//1console.log(fn());//2console.log(fn());//3