JS ES6补充
补充点：1、let const 2、字符串模板 3、箭头函数 4、对象的单体模式 5、面向对象
一、定义变量
A、var
特点：
1、定义全局变量
2、可以重复定义
3、变量名提升
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>声明变量</title>
</head>
<body>
<script>
{
var a =66;
console.log('in'+ a);
}
// 在块级作用域的变量，可以在全局中使用
// 1.var 定义的是全局变量
console.log('out'+ a);
// 2.var可以重新定义变量
var a = 88;
console.log('new'+a);
// 3.变量名提升
// 过程 var b -> 提升， 打印 b, b没有赋值，结果：undefined
console.log(b); //undefined
var b = 10;
</script>
</body>
</html>
B、let
特点：
1、块级变量
2、在同一作用域中，不可以重新定义
3、不支持变量名提升
{ let b = 5; console.log('b1', b) } // 1.let 声明块级变量 // console.log('b2', b); // b is not defined let b = 10; console.log('b3', b) // 2.let 不能重新声明变量 // let b = 20; // console.log('b4', b) // Identifier 'b' has already been declared // 3. let不支持变量提升 console.log(c); // Cannot access 'c' before initialization let c = 2;
C、const
特点：
1、定义常量
2、在同一作用域中，不能重复定义
3、不支持变量提升
const a = 10; // 1.const 定义的是常量，常量不能被修改 // a = 20; // console.log(a) // Assignment to constant variable. // 2. 不能重复声明 // const a = 20; // console.log(a) // Identifier 'a' has already been declared // 3. const 定义变量，不支持变量提升 console.log(b); const b = 30; // Cannot access 'b' before initialization
二、字符串模板
1、反引号(table键，上面的键)
2、格式：${变量名}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>字符串模板</title>
</head>
<body>
<script>
var name = 'tom';
var age = 24;
// 注意：
// 1. 反引号
// 2.${变量名}
var info = `${name},今年${age}岁!!!`;
console.log(info)
</script>
</body>
</html>
三、箭头函数
A、简介
格式：
f = function(a, b){} ---> f = (a, b)=>{}
注意：
1、形参为一个数时，括号可以省略不写
2、{}中只要return 时，{}也可以省略不写
B、箭头函数的坑
1、this
传统函数的this，指向调用的对象
箭头函数的this，指向声明对象的对象
// 字面量方式创建对象 var person = { name: 'tom', age: 24, inf0: function(){ // 1. 普通函数 this 指向 调用 对象 既 person console.log(this); // {name: "tom", age: 24, inf0: ƒ} } }; person.inf0(); // 字面量方式创建对象 var person2 = { name: 'alex', age: 43, info: ()=>{ // 1.箭头函数 this 指向 声明 对象 及 windows console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …} } }; person2.info();
2、arguments
// 2.箭头函数不能使用 arguments var foo = function(){ console.log(arguments); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ] } foo(1, 2, 3); var bar = ()=>{ console.log(arguments); // Uncaught ReferenceError: arguments is not defined } bar(3, 2, 1);
四、对象的单体模式
目的：解决箭头函数的this坑
// 字面量方式创建对象 var person = { name: 'tom', age: 34, // 格式对比： // info: ()=>{} // info(){} info(){ console.log(this.name); // tom } } person.info();
五、面向对象
1、ES5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 构造函数的方法创建对象，注意名字要大写
function Person(name, age){
self.name = name;
self.age = age;
}
// 创建该对象的方法
Person.prototype.showname = function(){
console.log(self.name);
}
// 实例化对象
var p1 = new Person('tom', 24);
p1.showname(); // tom
</script>
</body>
</html>
ES6
// 定义类 class Person{ // 构造方法 constructor(name, age){ self.name = name; self.age = age; } // 自定义方法 showname(){ console.log(self.name); } } // 实例化对象 var p2 = new Person('tom', 24); // 调用方法 p2.showname(); // tom
注意：ES6面向对象的语法比ES5面向对象的语法更像面向对象
浙公网安备 33010602011771号