JavaScript函数

JavaScript函数深入讲解 ／ 2-1 什么是对象

JavaScript中的对象，对象是什么：

 

 

对象就是值的集合，任意值的集合。

值包括所有5种基本类型以及3种引用类型的值。

为了方便访问值，就需要给值取个名字，这个就是属性。值

和键在一起就形成了键值对。

对象就是由一个又一个的属性所构成的。

对象无法直接使用，需要将它赋值给一个变量。

对象中的函数可称为方法。方法也是属性。

尽量少使用全局变量。 若是没有对象，就只能挨个声明全局变量，变量一多，容易造成命名冲突，而且分散。

 JavaScript函数深入讲解 ／ 2-2 如何使用对象

创建对象的方式：

var cat = new Object();

var cat = {};

ES5下有个方法：Object.create();

 

 

使用对象：

提取属性并赋值：

cat.name = "xx";

cat['name'] = "xx";//使用此方法方括号内部必须加引号。

创建新属性： cat.type = "haha";

删除属性： delete cat.type;

没有值的属性是undefined，不会报错。

 

判断对象是是否有某属性：属性名 in 对象名；//属性名需要加引号。

'name' in cat;//返回true。

 

遍历对象：

for( var p in car ) {//这里的的p代表属性名，可取任意名字。

console.log(p);//这里打印的是属性名；

console.log(cat[p]);//这里打印的是属性所对应的值。方括号内可做运算，字符串拼接等。

console.log(cat.p);//等同于cat['p'];返回undefined }

 JavaScript函数深入讲解 ／ 3-2 JS中的函数

什么是函数：一次定义，n次调用。

 

function关键字：作用就是告诉js解析器（浏览器），这里是一个函数，必写。函数保存在内存中。

函数名：区分不同函数，通过函数名来直指函数在内存中的位置。没有名字的函数是匿名函数，有名字的叫命名函数。

参数：可以什么都不写，可以写一个或多个，用逗号分隔。js中传入的参数可以和函数所需参数不一致。

函数体：局部作用域，return 函数先结束，并返回值。

 

函数定义和调用时发生了什么：

定义：封装了代码，window下面多了个属性，在局部作用域销毁后，该属性，节点仍可以调用。

调用：创建了局部作用域，接着赋值，执行，执行完毕后，销毁局部作用域，局部变量一块被销毁，第二次执行，会创建新的局部作用域，和之前不是同一个作用域。

 

JavaScript函数深入讲解 ／ 3-3 为什么要使用函数

为什么要使用函数：

1，复用代码。（自己和他人）

2，统一修改和维护。

3，增强代码可读性。

 

 

 什么时候该使用函数：

1，当程序中有太多相似或相同的代码。

2，程序暴露过多细节，可读性变差的时候。

 JavaScript函数深入讲解 ／ 3-4 函数的本质

函数的本质：

二象性：

1，可调用。

2，函数其实是对象，第二个特性很多像js的语言才有。

 

对象定义的方式：

字面量的方式{}：function add(){};

构造函数的方式new Object()：new Function(); // 添加属性和方法

var person = {};
person.name = 'xm';
person.setName = function (name) {
　　this.name = name;
}
function add(num1, num2) {
　　return num1 + num2;
}
add.sex = 'male';
add.setSex = function (sex) {
　　this.sex = sex;
}
console.log(add.sex);//male
console.log(add.setSex('female'));//undefined，函数内部只是发生了设置，没有返回值，这里输出的是返回值。
console.log(add.sex);//female
console.log(add(1, 2));//3

 

作用数据值使用：保存在堆内存中。

var add = function() {};//这里的add变量指向函数本体，打印add可以打印出function(){}。

var person = {};

var add = function () {

　　return 1;

};

 

//add();

console.log(add());

console.log(add);

//function add() { }

 

// 方式2：

[

　　{},

　　function () { }

]

 

// 方式3：

{

　　family: {},

　　setName: function (argument) {}

}

 

 作为参数使用： 函数名加括号就是执行函数，不加括号就是将函数本体传入。

setTimeout(function () {
　　console.log(1);
}, 1000);

 

setTimeout(fn, 1000);
function fn() {
　　console.log(1);
}

 

作为返回值：

function fn() {

　　return function () {//这里可以为函数取名字，但是这里是局部作用域，该函数只能在局部起作用，所以写了个匿名函数，若是要在全局调用，参考以下两种方式

　　　　console.log(1);

　　};

} // 调用返回值的函数，

 

方式1： var newFn = fn();//返回的是匿名函数，也就是newFn取到匿名函数。

newFn();//调用匿名函数。 // 调用返回值的函数，

 

方式2： fn()();

 

JavaScript函数深入讲解 ／ 4-1 三种定义方式及区别

//三种定义方式

//字面量

//function声明

function add() { }

add();//调用

 

//var赋值表达式

var add = function (argument) { };

add();//调用

 

 

var add = function fn(argument) {//可以

　　fn();

　　add();

};

add();

fn();//X错误

 

//构造函数，效率差一些。

var add = new Function('num1', 'num2', 'return num1 + num2;');//括号内的参数一定要用引号包裹，通过字符串传递。

add(); 

 

根据团队风格，var赋值表达式要注意先var才能使用，function声明没有这类问题。

 

JavaScript函数深入讲解 ／ 4-8 函数定义的位置

函数定义的位置：

1，全局作用域。

2，函数作用域。沿着作用域链查找。

3，if / for 中的代码块。js中相当于是全局的。不推荐。

4，对象中。

 

JavaScript函数深入讲解 ／ 5-1 普通函数的调用

匿名函数的调用：

function(){}()由于预解析的作用，开头给声明定义为函数整体，不能自我执行。

解决：

1：(function(){})()在前面加一个括号

2：(function(){}())完全包住也是可以。

3：var name = function(){}();用变量来代替函数开头；

4：!+-~function(){}();一元运算符在前面开头；

5：console.log(function(){}())也能执行。

递归函数：调用自己的函数自我执行，达到循环递归。

 

JavaScript函数深入讲解 ／ 5-5 方法的调用

方法的调用

1.在对象或者方法里面的方法调用，必须先调用对象/方法再调用(点)方法：object/function().functionName();

var operation = {
　　add: function (num1, num2) {
　　　　return num1 + num2;
　　},
　　subtract: function (num1, num2) {
　　　　return num1 - num2;
　　}
};
operation.add(1, 1);
document.onclick = function () {
　　console.log('你点击了文档！');
};
document.onclick();//手动模拟调用

 

2.对象里面的属性非正规的$_字母，必须加上字符串符号

"@非法":'非法情况'，调用的时候点改为["@非法"]；

 

var operation = {
　　add: function (num1, num2) {
　　　　return num1 + num2;
　　},
　　subtract: function (num1, num2) {
　　　　return num1 - num2;
　　},
　　'@': function () {//非法字符串需要引号，冒号右侧除了字符串要引，其他可以不用
　　　　console.log('@');
　　},
　　key: function () {  }
};
console.log(operation.add(1, 2));
console.log(operation['@'](1, 2));//非法字符串传入
var key = 'add';
console.log(operation[key](1, 2));//传入变量用[]

 

3.实现对象里面函数的链式操作可以在每个函数最后return this，意思返回对象函数。

var operation = {
add: function (num1, num2) {
　　console.log(num1 + num2);
　　return this;//链式调用返回自身对象
},
subtract: function (num1, num2) {
　　console.log(num1 - num2);
　　　　return this;
　　}
};
operation.add(1, 2).subtract(2, 1);

 

JavaScript函数深入讲解 ／ 5-8 构造函数的调用

构造函数的调用：通过new调用。

习惯性将构造函数名大写，以便于和普通函数区分，但这不是硬性要求。

普通函数若是没有return，则执行完函数后会返回undefined。

new 构造函数();//执行完后会返回一个对象，实例化一个函数，生成一个对象。

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

Object();//通过new Object()生成对象。

Array();//通过new Array()生成对象。

 

JavaScript函数深入讲解 ／ 5-12 函数的间接调用

每个函数都具有的方法（函数是对象，当然可以有方法）：

call();

apply();

call();//第一个参数，改变函数内this的指向，后面可以有很多参数，一个一个的传值，用逗号隔开。

apply();//只有两个参数，第一个参数效果相同，第二个参数是数组，通过数组或类数组传递值。

 

JavaScript函数深入讲解 ／ 6-1 参数的类型

函数的参数类型：

基本类型，引用类型。

 

 

参数传递的本质：

将实参赋值给形参。

person将地址告诉obj，此时person和obj指向同一个对象，这时对形参的修改就会影响到实参。

但是不管怎样参数传递的本质都是将实参赋值给形参。

 

JavaScript函数深入讲解 ／  6-2 参数的个数

参数个数：
实参个数小于形参个数：

根据预解析，未得到参数为undefined。
运用或||运算，自动判断，并赋值。

function pow(base, power) {
　　// if (!power) power = 2;
　　power = power || 2;
　　return Math.pow(base, power);
}
console.log(pow(3));
console.log(pow(3, 3));
//$('p')
//$('p', document)
//$('p', document.getElementById('box'))

//实参个数大于形参个数：利用arguments类数组，arguments指代的是参数的值。arguments[0]代表第一个值，以此类推。

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

 

JavaScript函数深入讲解 ／ 6-5 arguments

arguments：类数组，每个函数中都有的，是一个局部的东西。没有数组的方法，类似数组的对象。

{ '0': 1, '1': 2, '2': 3, length: 3 } 要注意改变arguments时会同时改变参数，因为他们指向的是同一个东西。

不会跨函数，每个函数所独有，不同函数虽然都写成arguments，但实际上的都不一样。

function fn() {
　　console.log(arguments);
　　function fn2() {
　　　　console.log(arguments);
　　}
　　fn2(2);
}
fn(1);

 

arguments.callee指函数本身，经常用在有递归调用的时候，更改函数名，内部也需要更改，可以直接让内部的函数名直接写成arguments.callee。

严格模式下"use strict"; 不准使用arguments.callee。也不能省略var声明全局变量。

也可以使用函数表达式为函数赋一个变量名，一个函数名：

"use strict";
var num = 1;
num = 1;//错误
var jicheng = function fn(num) {
　　if (num <= 1)
　　return 1;
　　return num * fn(num - 1);
};
console.log(jicheng(5));
console.log(jicheng(4));

判断实参和形参的个数是否相等：

arguments.length != 函数名.length;（前者代表实参个数，后者代表形参个数）

 

JavaScript函数深入讲解 ／ 6-9 什么可以做参数

什么可以做参数：

1，什么都不传。

2，数字。

3，字符串。

4，布尔值。（建议一个函数只做一件事）

5，undefined（参数设置不合理时，比如不必要的参数设在第一个，必要的设在第二个，使用的时候，不能跳过第一个参数，所以第一个参数必须写，有时候会写undefined）

6，null。

7，数组。

8，对象。

 

JavaScript函数深入讲解 ／ 7-1 return

return;//函数的结束与输出。在函数中使用。

continue;//在循环中使用。跳出本次循环。

break;//跳出整个循环。用在循环中。

JavaScript函数深入讲解 ／ 7-5 什么可以做返回值

什么可以做返回值：

1，什么都没有。（提前退出函数）

2，数字。

3，字符串。（当每次打印一个非字符串的时候，都会浏览器都会尝试这自动将其转化为字符串toString()）

4，布尔值。

5，null。

6，数组。

7，对象。

8，函数。

 

1. document.write期望接收和输出字符串，当接收的参数不为字符串时，会调用参数的toString方法，将其转化成字符串输出

2. 数组调用toString()后，会将其中的元素用逗号拼接起来变成字符串

3. 一般的对象调用toString()后返回[object Object]

重写对象的toString()方法，就按照重写方法的返回值输出

 

JavaScript实现简易计算器 ／ 3-1 添加JS功能

js中通过css选择器获取dom元素， 从dom中获取的数据都是字符串。

想要变为数字，可以在前面加个+号。做加法的时候可以用到这点，因为加法还有表示字符串拼接的意思。

其他的四则运算可以不用在前面加+号。做计算时会自动尝试转化为数字

 

 

select下拉菜单的用法就是在select标签上绑定onchange事件，通过this.value获取option中的value属性来进行匹配，其它的用法都是不可以的。记住这样使用就可以了。

JavaScript实现简易计算器 ／ 4-7 第六次修改--模块化

程序修改：

1，结构与表现分离。

2，使用循环。（明显有规律性的东西，用循环完成）。

3，提取函数。（函数的功能尽量单一，简单。）

4，管理代码。（为代码找到组织，通过对象，将所有的变量或小功能函数变成属性或方法，通过对象存取处理）

5，OCP原则（Open Closed Principle）开放与封闭原则。（更新功能的时候，尽量不要修改原有代码，提供一个接口（写一个函数当作接口，在接口内判断参数错误可以抛出异常），添加功能，不能影响原有的程序，少用switch）。

6，模块化。（可用自执行函数包裹，将全局变量变为局部变量，但这种方法没有往外暴露接口；暴露接口：找到该模块的核心功能，以及必传的一些参数，将其封装成一个函数，函数内部有返回值，可以返回内部的函数接口，可用变量接收，这个变量就是接口）