this
- this可以存储在任意位置，在不同的位置代表不同的对象。代表的是函数调用时函数的拥有者。
- 全局下的this是window对象
- 普通函数中，this表示window对象。
- 在事件处理函数中，this表示触发事件的元素
/*
this可以存储在任意位置，在不同的位置代表不同的对象。
*/
// 全局下的this是window对象
console.log(this);
// 普通函数中，this表示window对象。
function fun () {
console.log(this);
}
fun();
// 在事件处理函数中，this表示触发事件的元素
document.onclick = function () {
console.log(this);
}
自定义属性
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
// 声明变量记录状态，true表示red，false表示blue，把状态给每个元素上添加，每个元素都有一个自定义属性
lis[i].tag = false;
// 添加事件
lis[i].onclick = function () {
// 取出自己身上的tag属性值来判断
if (this.tag == false) {
this.style.background = 'red';
this.tag = true;
} else {
this.style.background = 'blue';
this.tag = false;
}
}
}
自定义索引
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
// 把下标值作为属性值绑定在每个li上称之为自定义索引
lis[i].index = i;
lis[i].onclick = function () {
console.log('click');
// console.log(i); // 7
// 获取时通过绑定的自定索引获取即可
console.log(this.index);
}
}
函数
- 函数是由事件驱动的或者当它被调用时可以重复使用的代码块。 函数分为：声明和调用。
函数的使用
- 函数使用
function声明，语法：function 函数名 () { 代码块 } - 函数需要调用才能执行内部的代码，语法：
函数名();
// 声明函数
function fun () {
console.log('fun');
}
// 调用函数
fun();
fun();
// 函数表达式
var f = function () {
console.log('f');
}
// 函数表达式的调用
f();
f();
- 函数的使用场景
// 1.事件处理函数
document.onclick = function () {
console.log('click');
}
// 2.普通函数
function fun () {
console.log('fun');
}
fun();
// 3.对象的方法
var obj = {
name: 'lilei',
age: 18,
sayhi: function () {
console.log('hi');
}
};
obj.sayhi();
函数的参数
- 参数分为形参和实参
- 形参：形式参数，在定义函数时把不确定的值使用变量代替。参数个数没有限制，参数之间使用逗号隔开。
- 实参：实际参数，在调用函数时在括号内传入确定的值。
- 参数的类型可以是任意数据类型。由于null和undefined作为参数没有意义并且容易出错，一般不使用null和undefined作为参数。
// 参数分为形参和实参
// 形参：形式参数，在定义函数时把不确定的值使用变量代替。
// 实参：实际参数，在调用函数时在括号内传入确定的值。
// 参数的类型可以是任意数据类型。由于null和undefined作为参数没有意义并且容易出错，一般不使用null和undefined作为参数。
function add(a, b) {
var sum = 0;
for (var i = a; i <= b; i++) {
sum += i;
}
console.log(sum);
}
add(1, 100);
add(100, 200);
arguments
- arguments会接受所有的参数，是类数组对象。
function fun (a, b) {
console.log(a, b);
console.log(arguments);
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments.length);
}
fun(10, 20);
函数中的问题
// 函数不能重名，会覆盖
// function add (a, b) {
// console.log('这是a,b');
// console.log(a + b);
// }
// function add (a, b, c) {
// console.log('这是a,b,c');
// console.log(a + b + c);
// }
// add(10, 20)
// 当形参和实参个数不一致时
function add (a, b) {
console.log(a, b);
console.log(a + b);
console.log(arguments);
}
add(10, 20); // 30 形参和实参个数一致，依次赋值
add(10); // 10+undefined：NaN 实参个数小于形参，从左到右依次赋值，没有赋值的形参为undefined
add(10, 20, 30); // 实参个数大于形参，从左到右依次赋值，所有的实参都会存在arguments中
函数中的this
// 普通函数中的this是window
function fun () {
console.log(this);
}
fun(); // window
// 事件处理函数中，this是触发事件的对象
// document.onclick = function () {
// console.log(this);
// }
document.onclick = fun;
// 对象的方法中this是对象本身
var obj = {
name: 'lilei',
age: 18,
// sayhi: function () {
// console.log(this);
// }
sayhi: fun
};
obj.sayhi();
作用域
-
作用域：变量或者函数的有效使用范围。
-
作用域分为：局部作用域，全局作用域
-
局部作用域：声明在函数中的变量或者函数，只能在该函数中有定义，出了函数就不能使用了。
-
全局作用域：声明在全局中的变量或者函数，在全局都有定义（可以使用和修改）。
-
作用域链：作用域链是JavaScript中的查找机制，当使用变量或者函数时会优先在当前的作用域中查找，如果找到就直接使用；如果找不到就往上一级作用域中查找，直到全局作用域为止，如果全局作用域也找不到，就报错：xx is not defined。
// 作用域链：作用域链是JavaScript中的查找机制，当使用变量或者函数时会优先在当前的作用域中查找，如果找到就直接使用；如果找不到就往上一级作用域中查找，直到全局作用域为止，如果全局作用域也找不到，就报错：xx is not defined。
var a = 10;
var b = 20;
console.log(a); // 10
function fun () {
console.log(a); // 10
var b = 30;
function inner () {
console.log(a); // 10
console.log(b); // 30
// console.log(c); // 16-作用域链.html:22 Uncaught ReferenceError: c is not defined
}
inner();
}
fun();