JS ES6补充
2024-09-06 16:47:13
补充点: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面向对象的语法更像面向对象
最新文章
- jQuery-2.1.4.min.js:4 Uncaught TypeError: Illegal invocation
- iOS定位到崩溃代码行数
- Object-C内存管理
- 利用xshell从windows上传文件到虚拟机
- 解决chrome下上传文件 返回值带 <;pre style=";word-wrap:break-word;white-space:prewrap;";>;<;/pre>;
- javascript (六) 引用外部js文件
- JPA常用注解(转载)
- Selenium自动化测试之元素定位
- 基础学习14天 MD5加密
- Linux配置本地yum源
- Pytorch Visdom
- HttpRunner 接口自动化简单实践
- Idea 2017.3以后版本的破解
- Go语言之讲解GOROOT、GOPATH、GOBIN
- crontab定时任务操作
- oracle 数据库更新 新增 修改 删除
- java中的悲观锁和乐观锁实现
- 转: LDAP有啥子用? 用户认证
- python3----scrapy(笔记)
- dataTables的用法
热门文章
- linux Completions 机制
- eslint在webstorm中有错误警告
- POJ - 3415 Common Substrings (后缀数组)
- SPOJ Another Longest Increasing Subsequence Problem 三维最长链
- background新增属性
- Python进程池使用
- MySQL数据库性能优化:表、索引、SQL等
- mysql主从之双主配置
- windows 服务的安装、启动、状态查询、停止操作c++实现
- $Poj1220/AcWing124\ Number\ Base\ Convertion$ 进制转换+高精除