1. var let const
作用域 | 变量提升 | 重复声明 | 修改 | |
---|---|---|---|---|
var | 函数作用域 | 存在 | 可以 | 可以 |
let | 块级作用域 | 无 | 不可以 | 可以 |
const | 块级作用域 | 无 | 不可以 | 不可以 |
1)var:用于声明变量
var a = 8; //全局变量
function fun() {
var a = 6; //局部变量
console.log(a); //6
}
fun()
console.log(a);//8
函数内省略var:
var a = 8; //全局变量
function fun() {
a = 6; //全局变量
console.log(a); //6
}
fun()
console.log(a);//6
注意:var 声明的变量存在提升
2)let 声明变量特征
- 声明的变量具有块级作用域的特征;
- 在同一个块级作用域不能重复声明变量;
- let声明的变量不存在变量提升
3)const
定义的变量不允许修改
const x = 1;
console.log(x);//1
x = 2;
console.log(x);//Uncaught TypeError: Assignment to constant variable.
const 声明创建一个值的只读引用:
const obj = {
a:1,
b:2
};
console.log(obj.a);//1
obj.a = 3;
console.log(obj.a);//3
2. 解构赋值
解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。
var a, b, c, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
console.log(c); //undefined
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true
3. 函数调用方式
- 函数调用
function foo() {
console.log(this);//this指向window
}
foo();
- 对象方法调用
创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName), 及一个方法 (fullName):
fullName 方法是一个函数。函数属于对象。 myObject 是函数的所有者。
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName; //this指向当前对象(myObject)
}
}
myObject.fullName(); // 返回 "John Doe"
- 构造函数调用
如果函数调用前使用了new关键字,则是调用了构造函数
this指向被创建的对象
// 构造函数:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// This creates a new object
var x = new myFunction("John","Doe");
x.firstName;
- 上下文调用模式
函数名.call( 对象, 参数 );
函数名.apply( 对象, [ 参数 ] );
//1. call()
var o = {
name: 'sunny'
}
function fn(a, b) {
console.log(this);//{name: 'sunny'}
console.log(a + b);//3
}
fn.call(o, 1, 2);
//call 可以调用函数,可以改变函数内的this指向
//可以实现继承
function Father(uname, age, sex) {
this.uname = uname;
this.age = age;
this.sex = sex;
}
function Son(uname, age, sex) {
console.log(this);//Son {}
Father.call(this, uname, age, sex);
}
var son = new Son('刘德华', 18, '男');
console.log(son);//Son {uname: '刘德华', age: 18, sex: '男'}
var o = {
name: 'sunny'
};
function fn(color) {
console.log(this);
console.log(color); //'pink'
};
fn.apply(o, ['pink']);//{name: 'sunny'} pink
//1. 也是调用函数,第二个可以改变函数内部的this指向
//2. 但是它的参数必须是数组(伪数组)
//3. apply 的主要应用,可以利用apply 借助于数学内置对象求最大值
// Math.max();
var arr = [1, 66, 3, 99, 4];
// var max = Math.max.apply(null, arr);
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max, min);//99 1
call apply bind总结
相同点:都可以改变函数内部的this指向
不同点:
1. call和apply会调用函数,并且改变函数内部的this指向
2. call和apply传递的参数不一样,call传递参数aru2,aru1,…形式,apply传递数组
3. bind不会调用函数,可以改变函数内部this指向