ES5和ES6区别

最新推荐文章于 2024-05-12 14:16:53 发布
最新推荐文章于 2024-05-12 14:16:53 发布
阅读量550 收藏 4
点赞数 2
分类专栏： js 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40657321/article/details/107337212
版权

一.严格模式

定义：更严格的模式，不支持变量提升
用法：“use strict”;加在作用域开头，建议加在函数的作用域中，不能加在全局作用域中

demo1:
function fn(){
		   a=100;
		}
	      fn();
	      console.log(a);//100

//因为在调用函数时a=100,因为在函数中没有声明变量a,所以修改全局变量var a=100,所以结果为100

但是在严格模式下

function fn(){
		"use strict";
		a=100;
	 }
	fn();
	console.log(a);//报错Uncaught ReferenceError:max is not defined

变量没有声明，所以报错，无法调用父级

二.bind/apply/call

bind/apply/call都是改变this指向的方法
//bind:返回值是一个函数，需要调用时才有效，可以用在计时器中，只有计时器调用才生效
//apply和call返回值是一个对象，不需要调用，不能用在计时器中，会直接输出，计时器无效
//this所在函数绑定给那个对象，this就代表谁
demo：

var oBtn=document.getElementById("btn");
	function fn(){
		alert(this);//指向当前元素的对象
	}
			
fn();//在没有指定对象时，this默认Window,[object Window]
document.onclick=fn;//指定为document,[object HTMLDocument]
input元素调用函数，this指向[object HTMLInputElement]
oBtn.onclick=fn;//[object HTMLInputElement]
			
var对象如何调用fn,并且this指向obj
var obj={};
obj.fn=fn;
obj.fn();//[object Object]
		
function fn(){
		alert(this);//指向当前元素的对象
	}
	fn.bind(oBtn)();//[object HTMLInputElement],需要被调用
	console.log(fn.bind(oBtn));//返回值是函数体
	fn.apply(oBtn);//[object HTMLInputElement]
	fn.call(oBtn);//[object HTMLInputElement]

三.bind的计时器用法

1.计时器

var oBtn=document.getElementById("btn");
	document.onclick=function(){
		//alert(this);//[object HTMLDocument}
		setInterval(function(){
			alert(this);
		}.bind(oBtn),1000)//window,计时器默认绑定对象是window,当加.bind以后，可以改变默认绑定对象，this绑定oBtn[object HTMLInputElement]
}

注：计时器不可使用call和apply，因为call和apply打开页面就执行，计时器失效，只有bind是需要函数调用的，只有计时器执行时，才调用
2.绑定数组后this指向数组

当bind(Array)时，会自动创建数组
       }.bind(Array),1000)
	function Array() {
		[native code]
	}

四.JSON.parse和JSON.stringify

1.我们从eval方法，过渡到了JSON.parse(),去除了eval方法注入代码的风险
2.JSON方法

//JSON.parse(json字符串)；字符串转换成json对象
//JOSN.stringify(json对象);json对象转换成字符串
			
var str='{"id":1,"name":"宋威龙","price":999999}';
var json=JSON.parse(str);
console.log(json);//Object { id: 1, name: "宋威龙", price: 999999 }
console.log(json.price);//999999
var newStr=JSON.stringify(json);
			console.log(newStr);//{"id":1,"name":"宋威龙","price":999999}

五.let和const

let
1.let 不做变量提升
2.let 产生了块级作用域,在块内声明的变量,只能在块内使用
for循环是一个块级作用域,for循环中的{}是for循环中的子级块作用域
3.let 同一个作用域中,不同重复声明同一个变量.
4.let声明的全局变量不再是window对象的属性.

demo:
//let声明变量的方式，相当于var,但是比var 严格
	//1.let不做变量提升，相对严格，直接报错
			console.log(a);
			console.log(b);
			
			var a=3//undefined
			let b=4;//报错
			
	//2.let是块级作用域，在块内声明的变量，只能在块内使用
			{
				var a=3;
				let b=4;
			}
			console.log(a);//3
			console.log(b);//报错
			//2.补充：for循环是一个块级作用域,for循环中的{}是for循环中的子级块作用域
			let i=10;//作用域1
			for(let i=0;i<5;i++){//作用域2，循环5次
				//作用域3
				let i=5;
				console.log(i);//5,5,5,5,5，每次输出本作用域中的i=5
			}
			/*
				i = 5
				setTimeout(function(){
					console.log(i);
				},1000)
				setTimeout(function(){
					console.log(i);
				},1000)
				setTimeout(function(){
					console.log(i);
				},1000)
				setTimeout(function(){
					console.log(i);
				},1000)
				setTimeout(function(){
					console.log(i);
				},1000)
			*/
			//开了5个计时器，到i=5结束，所以输出5个5
			for(var i=0;i<5;i++){
				setTimeout(function(){
					console.log(i);//5,5,5,5,5
				},1000)
			}
			/*
				i = 0
				setTimeout(function(){
					console.log(i);
				},1000)
				
				
				i = 1
				setTimeout(function(){
					console.log(i);
				},1000)
				
				i = 2
				setTimeout(function(){
					console.log(i);
				},1000)
				
				i = 3
				setTimeout(function(){
					console.log(i);
				},1000)
				
				i = 4
				setTimeout(function(){
					console.log(i);
				},1000)
				
				 i = 5
			*/
			for(let i=0;i<5;i++){
				setTimeout(function(){
					console.log(i);//0,1,2,3,4
				},1000)
			}
			
			//点击显示下标
 	  <a href="javascript:;">1</a>
		<a href="javascript:;">2</a>
		<a href="javascript:;">3</a>
		<a href="javascript:;">1</a>
		<a href="javascript:;">2</a>
		<a href="javascript:;">3</a>
		<a href="javascript:;">1</a>
		<a href="javascript:;">2</a>
		<a href="javascript:;">3</a>
		    var oA=document.querySelectorAll('a');//利用选择器获取所有a标签
		    for(var i=0,len=oA.length;i<len;i++){//循环遍历
			oA[i].index=i;//让oA的第i个下标等于i
			oA[i].onclick=function(){//点击事件
				alert(this.index);//弹出下标
			}
		     }
			
			
			//3.在let中不可重复声明变量，var会覆盖，let不可以
			var a=3;
			var a=4;
			var a=5;
			console.log(a);//5
			let b=3;
			let b=4;
			let b=5;
			console.log(b);//报错
						
			//4.let声明的全局变量不再是window属性
			var num=3;
			let str="hehe";
			console.log(window.num);//3
			console.log(window.str);//undefined

2.const:声明常量，好处：当同一个数用的过多时，一改全改，建议声明常量名大写

const G=10;
			G=99;
			console.log(G);//报错。常量无法修改，栈中直接存入常量，无法修改
			
			const ARR=[1,29,31,4];
			ARR[0]=10;
			console.log(ARR);//Array(4) [ 10, 2, 3, 4 ]，数组只可以根据下标修改单个元素，不能整体修改，因为数组在栈中存放的是地址，地址指向堆，可以修改堆中的元素
			ARR=[];//不可以整体修改，整体修改是修改地址，所以报错
			console.log(ARR);
			//for循环，输出栈中元素
			for(let i=0,len=ARR.length;i<len;i++){
				console.log(ARR[i]);//1,29,31,4
			}

六.解构赋值

一、 变量解构
(一) destructuring解构

  1. 以前我们定义多个变量，可以这样写：
var x = 10,y = 20,z = 30;
  1. 现在我们可以这样写：
let[x,y,z] = [10,20,30];
let[x,[a,b],y] = [10,[15,18],20];

这并不是在定义数组，而是通过等号两边的结构匹配，进行赋值。
3. 当然，如果你写的不够规范：

let [x,y] = [10,20,30]; //结果x = 10,y = 20
let[x,[a,b],y] = [10,[5],20]; //结果x = 10,a = 5,y = 20,b =undefined

浏览器并不会报错，依然赋值成功。
4. 甚至可以使用对象来赋值

var {id,name,age} = {id:43,name:’zzl’,age:18}

(二) 解构赋值的用途

function fn({a=33,b=2090,c=8}){//初始值
				if(a>b){
					[a,b]=[b,a];//变量交换
				}
				if(a>c){
					[a,c]=[c,a];
				}
				if(b>c){
					[b,c]=[c,b];
				}
				return [a,b,c];//多个返回值
			}
			var [a,b,c]=fn({b:30,a:100,c:-3});、、传参可以不考虑顺序
			console.log(a,b,c);//-3,30,100
  1. 交换变量的值
[a,b] = [b,a]; //排序可能会常用到
  1. 函数返回多个值，这个功能比较有颠覆性
var [r1,r2,r3] = exec();
function exec(){
   return [“结果a”,”结果b”,”结果c”];
}
  1. 函数的参数定义方式，不用再考虑顺序
function exec({time,speed,pos}){
}
执行函数：
exec({
   pos : {x:20,y:55},
   speed : 50,
   time : 2000
})
默认值也可以顺便带上：
function exec({time = 2000,speed = 50,pos}){
}

七、 字符串扩展

(一) includes(),startsWith(),endsWith()
传统上，JavaScript只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。
1.str.includes(字符串，start);判断父串中是否包含子串，包含返回true,不包含返回false

str.startsWith(字符串，start);判断父串是否以指定字符串开头
str.endsWuth(字符串，start)判断父串中是否以指定字符串结尾
var s = "Hello world!";
alert(s.startsWith("Hello"));  
alert(s.endsWith("!"));   
alert(s.includes("o"));
  1. 这三个方法都支持第二个参数，表示开始搜索的位置。
var str="how do you do";
var ss="do";
console.log(str.includes(ss,2));//true
console.log(str.startsWith(ss,4));//true,匹配是包含第四个
console.log(str.endsWith(ss,6));//false，匹配时不包含第6个，从后往前查找

上面代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对n前的字符，而其他两个方法针对从第n个位置直到字符串结束。
(二) repeat():返回一个新字符串，表示将原字符串重复n次。

  1. alert(‘x’.repeat(3));
alert("hello".repeat(2)); 
alert("na".repeat(0));
  1. 参数如果是小数，会被取整。
alert('na'.repeat(2.9)); //"nana"
  1. 如果repeat的参数是负数或者Infinity，会报错。
alert('na'.repeat(Infinity)); //RangeError
alert("na.repeat(-1)); //RangeError
  1. 但是，如果参数是0到-1之间的小数，则等同于0,这是因为会进行取整运算。0到-1之间的小数，取整以后等于-0，repeat视同为0。
alert(“na”.repeat(-0.9));   //””
  1. 参数NaN等同于0
  2. 如果repeat的参数是字符串，则会先转换成数字。

八.箭头函数

（一）箭头函数的用法
1.函数原来的写法

function fn(a,b){
	return a+b;
}
使用箭头函数：
 var fn=(a,b)=>{return a+b;};
console.log(fn(3,4));//7

看起来很简单吧？省略了function,return关键字和大括号，使用方法跟以前一样没区别
2.,会指向当前对象的父对象

document.onclick = () =>{
	console.log(this);//window,会指向当前对象的父对象
	setTimeout(()=>{
		console.log(this);//Window
	},1000)
}

(二) 当然也有一些缺陷

  1. 箭头函数是不能new 的，它的设计初衷就跟构造函数不太一样
  2. 箭头函数如果要返回一个JSON对象，必须用小括号包起来
    var test = () =>({id:3,value=20})
  3. 不推荐使用：因为这样的设计对代码的可读性伤害太大了。省略掉一个function单词，并不能给开发效率提高多少，但牺牲的却是最基本的代码可读性。除了数学运算，我们几乎从来不用符号表示一些复杂的含义。

九. symbol类型（第七种数据类型）

demo1:
   var s1 = Symbol();
   var s2 = Symbol();
   var s3 = Symbo(“abc”);
   var s4 = Symbol(“abc”);
  s1 不等于s2   s3不等于s4
demo2:
   var a={},b={},c={};
		console.log(a);//Object {  }
		c[a]=1;//给c添加a属性，属性值1
		c[b]=2;//给c添加b属性，属性值2
		console.log(c);//Object { "[object Object]": 2 },a属性被覆盖，因为属性都是"[object Object]"
		c[s1]=56;
		c[s2]=68;
		console.log(c);//Object { "[object Object]": 2, Symbol(ahah): 56, Symbol(ahah): 68 },sym属性具有唯一性，不会覆盖

Symbol函数会生成一个唯一的值，可以理解为Symbol类型跟字符串是接近的，但每次生成唯一的值，也就是每次都不相等，至于它等于多少，并不重要。这对于一些字典变量，比较有用

const TYPE = {
     SMALL : Symbol(),
     MIDDLE :Symbol(),
     LARGE : Symbol()
}

//以前我们可能会把SMALL、MIDDLE、LARGE赋值为数字或字符串，还要确保它们的值不能发生重复，但现在不用担心了。

十、 Set和Map结构

(一) Set集合，本质上就是对数组的一种包装
集合的基本概念：集合是由一组无序且唯一（即不能重复）的项组成。这个数据结构使用了与有限集合相同的数学概念，应用在计算机的数据结构中。
特点：key 和 value 相同，没有重复的value，类似于数组，但没有重复的value
ES6提供了数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

  1. 如何创建一个Set
const s =new Set([1,2,3,4]);
const set=new Set([1,1,4,"4",new String(),new String(),5,6,5,6]);
console.log(set);//Set(7) [ 1, 4, "4", String, String, 5, 6 ];
  1. Set类的属性
set.size : 返回集合的长度
console.log(set.size);//7
  1. Set类的方法
1) set.add(value)  : 添加一个数据，返回Set结构本身
例如：
let imgs = new Set();
imgs.add(1);
imgs.add(1);
imgs.add(5);
imgs.add(“5”);
imgs.add(new String(“abc”));
imgs.add(new String(“abc”));
for(let i of imgs){
    document.write(i + “ “);
}
打印的结果：1  5  “5”  “abc”  “abc”
set.add("adff").add(888).add("hello");
console.log(set);//Set(10) [ 5, 2, 3, 1, 43, 6, 7, "adff", 888, "hello" ]

Set集合是默认去重复的，但前提是两个添加的元素严格相等，所以5和”5”不相等，两个new出来的字符串对象不相等
2) set.delete(value) : 删除指定数据，返回一个布尔值，表示删除是否成功。

如：set.delete(43);
console.log(set);//Set(9) [ 5, 2, 3, 1, 6, 7, "adff", 888, "hello" ]
  1. set.has(value) :判断该值是否为Set的成员，返回一个布尔值。
    如：
  var s = new Set([1,2,3,4]);
   console.log(s.has(1));//true
  1. set.clear() :清除所有数据，没有返回值
    如：
 var s = new Set([1,2,3,4]);
  s.clear();
console.log(s);//Set []

(二) 关于遍历的方法

  1. 由于Set集合本质上还是一个map,因此会有以下几种奇怪的遍历方法
  1. keys() 返回键名的遍历器
var imgs = new Set([‘a’,’b’,’c’]);
//根据key遍历
for(let item of imgs.keys()){
   console.log(item);
}
//a
//b
//c
  1. values() 返回键值的遍历器
    //根据value遍历
for(let item of imgs.values()){
    console.log(item);
}
//a
//b
//c
  1. entries() 返回键值对的遍历器
    //根据key-value遍历
for(let item of imgs.entries()){
    console.log(item);
}
//[‘a’,’a’]
//[‘b’,’b’]
//[‘c’,’c’]

for of 和for in 区别

  1. for of中，变量获取的集合中的value,key,key:value,而for in中获取的是对象或数组的下标
    2.for in格式：for(变量名 in 数组、对象)
    for of格式：for(变量名 of 集合)
for(let item of imgs){
   console.log(item);
}
//a
//b
//c

SET集合没有提供下标方式的访问，因此只能使用for of来遍历。
4) forEach(function(value,key,set){}) 使用回调函数遍历每个成员

let s = new Set([1,2,3,4]);
s.forEach(function(value,key,set){
   console.log(value);
});
  1. 下面展示了一种极为精巧的数组去重的方法
    var array = [1,3,2,1,2,5,2];
    var newarr = […new Set(array)];
    (三) Map集合，即映射
    字典：是用来存储不重复key的Hash结构。不同于集合（Set）的是，字典使用的是[键，值]的形式来储存数据的。
    JavaScript的对象（Object：{}）只能用字符串当作键。这给它的使用带来了很大的限制。
    为了解决这个问题，ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object结构提供了“字符串-值”的对应，Map结构提供了“值-值”的对应，是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构，Map比Object更合适。
    如：
  2. 如何创建一个Map
    .map([[]]);里面存放二维数组
	var a=[];
			var b=[];
			let obj={};
			obj[a]=2;
			obj[b]=5;
			console.log(obj);//Object { "": 5 },会将key自动变成字符串，a和b都是空数组，解析成空字符串，key相同，多以覆盖
			let map=new Map([
				["name","张三"],
				[true,true],
				[[],4],
				[[],8]
			])
			console.log(map);//Map(4) { name → "张三", true → true, [] → 4, [] → 8 }，不会将key解析成字符串，会保留数据类型，所以不会出现覆盖的情况
const map = new Map([[‘a’,1],[‘b’,2]]);
console.log(map);
  1. Map类的属性
map.size  : 返回map的长度
console.log(map.size);
  1. Map类的方法
  1. set(key , value) 设置键名key对应的键值为value，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就新生成该键。
demo1:
let map=new Map();
// set()添加元素,可以链式添加
map.set("myn","my").set("yj","za").set("lr","syj");
console.log(map);//Map(3) { myn → "my", yj → "za", lr → "syj" }
demo2:			
let map = new Map();
map.set(“S230”,”张三”);
map.set(“S231”,”李四”);
map.set(“S232”,”王五”);
map.set(“S230”,”赵六”);
console.log(map);
  1. get(key) get方法读取key对应的键值，如果找不到key，返回undefined.
    如：
map.get(“S232”); //王五
console.log(map.get("myn"));//my
  1. delete(key) 删除某个键，返回true。如果删除失败，返回false。
    如：
map.delete("lr");
console.log(map);//Map { myn → "my", yj → "za" }
console.log(map.delete(“S232”));
  1. has(key) 方法返回一个布尔值，表示某个键是否在当前Map对象之中。
    如：
console.log(map.has(“S232”));
console.log(map.has("yj"));//true
  1. clear() 清除所有数据，没有返回值
    如：
map.clear();
console.log(map);//Map(0)
  1. keys() 返回键名的遍历器,获取所有的key与for of 连用
			let map1=new Map([
				["dog","keke"],
				["cat","mimi"],
				["bird","小可爱"]
			])
			for(let key of map1.keys()){
				console.log(key);
			}
结果：
			/*
				dog 
				cat 
				bird
			 */
如：console.log(map.keys());
  1. values() 返回键值的遍历器，获取所有value,与key相同必须结合for of使用
for(let value of map1.values()){
				console.log(value);
			}
结果：
			/*
			   keke
			   mimi
			   小可爱
			 */
如：console.log(map.values());
  1. entries() 返回键值对的遍历器
  for(let [key,value] of map1.entries()){
				console.log(key,value);
			}
结果
			/*
			   dog keke
			   cat mimi
			   bird 小可爱
			 */
如：console.log(map.entries());
  1. forEach(function(key,value,map){}) 使用回调函数遍历每个成员
    如：
 map1.forEach(function(key,value){
				console.log(key+"=>"+value);
			})
			/*
			   dog=>keke
			   cat=>mimi
			   bird=>小可爱
			 */
循环遍历，配合解构赋值
for(let [key,value] of map){
   console.log(key,value);
}
  1. Map在使用过程中的一些注意事项：
map.set(NaN,10).set(NaN,100);
console.log(map);
map.set({},”x”).set({},”y”);
console.log(map);
console.log({} === {});

十一、 Generators生成器函数

(一) 基本概念：Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。（程序中的异步相当于生活中的同步，同时开始做事情）

  1. Generator函数有多种理解角度。从语法上，首先可以把它理解成，Generator函数是一个状态机，封装了多个内部状态。
  2. 执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历Generator函数内部的每一个状态。
  3. 形式上，Generator函数是一个普通函数，但是有两个特征。一：function关键字与函数名之间有一个星号；二：函数体内部使用yield语句，定义不同的内部状态（yield语句在英语的意思就是“产出”）。
    计时器案例：计时器都是同时开始计时的，时间短的先显示，当我们想让时间短的在后面显示时，可以嵌套，当一个执行完了，触发下一个
setTimeout(function(){
			alert(1);
			setTimeout(function(){
				alert(2);
				setTimeout(function(){
					alert(3);
				},1000)
			},2000)
		},3000)
注：会降低代码的可读性，所以不建议使用
function * helloWorldGenerator(){
    yield ‘hello’;
    yield ‘world’;
    return ‘ending’;
}
var hw = helloWorldGenerator();

上面代码定义了一个Generator函数helloWorldGenerator，它内部有两个yield语句“hello”和“world”，即该函数有三个状态：hello，world和return语句（结束执行）。
然后，Generator函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用Generator函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是上面讲的遍历器对象（Iterator Object）。下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield语句（或return语句）为止。换言之，Generator函数是分段执行的，yield语句是暂停执行的标记，而next方法可以恢复执行。

hw.next() //{value: ‘hello’,done:false}
hw.next() //{value: ‘world’,done:false}
hw.next() //{value: ‘ending’,done:true}
hw.next() //{value: ‘undefined’,done:true}

上面代码一共调用了四次next方法。
第一次调用，Generator函数开始执行，直到遇到第一个yield语句为止。next方法返回一个对象，它的value属性就是当前yield语句的值hello，done属性的值false，表示遍历还没有结束。
第二次调用，Generator函数从上次yield语句停下的地方，一直执行到下一个yield语句。next方法返回的对象的value属性就是当前yield语句的值world，done属性的值false，表示遍历还没有结束。
第三次调用，Generator函数从上次yield语句停下的地方，一直执行到return语句（如果没有return语句，就执行到函数结束）。next方法返回的对象的value属性，就是紧跟在return语句后面的表达式的值（如果没有return语句，则value属性的值为undefined），done属性的值true，表示遍历已经结束。
第四次调用，此时Generator函数已经运行完毕，next方法返回对象的value属性为undefined，done属性为true。以后再调用next方法，返回的都是这个值。
总结一下，调用Generator函数，返回一个遍历器对象，代表Generator函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield语句后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。
4. ES6没有规定，function关键字与函数名之间的星号，写在哪个位置。这导致下面的写法都能通过。

function * foo(x,y){…}
function *foo(x,y){…}
function* foo(x,y){…}
function*foo(x,y){…}

由于Generator函数仍然是普通函数，所以一般的写法是上面的第三种，即星号紧跟在function关键字后面。

十二. 掌握Class的写法

(一) Class保留字终于成了关键字

  1. 以前编写一个构造函数（类）
//Es5构造函数
		function Dog(name,age){
			this.name=name;
			this.age=age;
			this.showName=function(){
				return this.name;
			}
			this.showAge=function(){
				return this.age;
			}
		}
  1. 现在的写法跟Java更接近了
//ES6
		class Cat{
			//构造器
			constructor(name,age){
				this.name=name;
				this.age=age;
				this.showName=function(){
					return this.name;
				}
				this.showAge=function(){
					return this.age;
						
				}
			}
		}
		var dog=new Dog("可可",6);
		alert(dog.name);
		var cat=new Cat('mimi',3);
		alert(cat.showName());

我们定义了一个类，名字叫Dog
通过类生成一个实例：

var iphone = new Iphone(“白色”,5);

其中constructor被称之为构造方法，在我们new一个对象的时候，自动被调用
不过本质上，JS依然使用了原型来实现，也就是说，这不过是一个新的写法而已，跟以前的构造函数没有区别。
3. 要注意的是，使用了class来定义类，必须先定义再使用
以前这样写没有问题：

new Person();
function Person(){
}
现在这样写报错：
new Person();
class Person{
    constructor(){

    }
}
甚至还可以定义一次性的类
let person = new class{
   constructor(){
  
   }
}();

这个类被定义出来，只能实例化一次，跟Java的匿名内部类很像
4. 关于继承

class Son extends Father{
    constructor(age){
        super();  //这相当于调用了父类的构造方法，类似于传统写法Father.call(this) 基类（父类、超类）
        //但是这个方法是必须在第一行先调用
        this.age = age;
    }
}
MYG_G
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React中ES5与ES6写法的区别总结
08-30
React中ES5与ES6写法的区别总结 在 React 中，ES5 和 ES6 两种写法是开发者最常用的两种方式。这两种方式有着很大的区别...ES5 和 ES6 两种写法都有其自己的优点和缺点，了解这两种方式的区别对于开发者来说非常重要。
继承行为在 ES5 与 ES6 中的区别详解
11-29
总结来说，ES5和ES6在继承上的主要区别包括： 1. ES5使用构造函数和`prototype`对象模拟类和继承，而ES6引入了`class`和`extends`关键字，提供了更接近传统面向对象语言的语法。 2. ES5中子类必须通过`call`或`apply...
ES6和ES5的区别
m0_65121981的博客
12-20 8887
一、es5和es6的区别 ECMAScripts5,即ES5，是ECMAScripts的第五次修订，于2009年完成标准化ECMAScripts6，即ES6，是ECMAScripts的第六次修订，于2025年完成，也称ES2015ES6是继ES5之后的一次改进，相对于ES5更加简洁，提高了开发效率ES6新增的一些特性： 1）let声明变量和const声明常量，两个都有块级作用域ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明 2）箭头函数ES6中的函数定义不再使用关
Javascript的es5和es6
2202_75802608的博客
06-09 1690
es5和es6的关键字使用，包括继承方式不同的优点和缺点
2024年前端最全ES5，ES6的简要说明及浏览器支持性总结，华为Web前端面试真题解析
最新发布
2301_82243710的博客
05-12 940
（7）Object.getOwnPropertyDescriptor() 返回对象上一个自有属性对应的属性描述符（不需要从原型链上进行查找的属性）。（6）Array.prototype.lastIndexOf() 返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。callback：用来测试数组的每个元素的函数。（7）Array.prototype.map() 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
JavaScript中ES5和ES6的区别
weixin_73426945的博客
07-16 526
💫总之，相对于ES5，ES6提供了更多方便的语法和功能特性，使得开发者能够更加高效和舒适地进行开发工作。⭐️变量声明方式：在ES5中，使用var关键字进行变量声明，而ES6引入了let和const关键字来声明变量。而在ES6中，增加了块级作用域，这意味着对于在if、for、switch等代码块中声明的变量，在外部是不可见的。⭐️箭头函数：ES6中新增了箭头函数，可以更简洁地定义函数，同时箭头函数没有自己的this，它的this绑定在父级作用域的this上。
js学习笔记 - ES6 ES5的区别
weixin_54284859的博客
09-03 2218
ES6 ES5的区别 引入class,promise,async,await,let,const块级作用域，模板字符串，函数默认参数，箭头函数
ES5和ES6.md
07-15
js一直被各个语言诟病，因为js的作用域让开发者困扰，也因为js在以前不算是面向对象的语言。...好的东西，兼容性总是不太好，不过，没关系，后期我们会学习一个工具将es6的语法转为兼容最好的es5的语法
js笔记整理BOM和DOM，es5和es6
05-09
JavaScript是Web开发中不可或缺的一部分，主要分为两个核心部分：BOM（浏览器对象模型）和DOM（文档对象模型），以及两种版本：ES5和ES6。本文将深入探讨这些概念及其重要知识点。 首先，BOM（Browser Object Model...
es6转es5在线转换.txt
04-14
es6转es5在线转换地址，和如何利用babel工具将es6语法转换成es5语法 es6有些语法是目前浏览器无法支持的，所以我们需要转换一下
ES5和ES6
hzg_hou的博客
05-17 273
ES5和ES6
ES5，ES6的简要说明及浏览器支持性总结
2401_83641250的博客
03-29 651
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可获取%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-FdpdXwYk-1711660560273)]
React/React Native 的ES5 ES6写法对照表
weixin_30293135的博客
03-21 431
转载：http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8 英文版:https://babeljs.io/blog/2015/06/07/react-on-es6-plus 很多React/React ...
ES6与ES5比较
wskwxx的博客
03-06 161
ES6和ES5
前端面试题整理—ES6篇
aoxi9939的博客
03-22 569
1、es5和es6的区别，说一下你所知道的es6 　　ECMAScript5，即ES5，是ECMAScript的第五次修订，于2009年完成标准化 　　ECMAScript6，即ES6，是ECMAScript的第六次修订，于2015年完成，也称ES2015 　　ES6是继ES5之后的一次改进，相对于ES5更加简洁，提高了开发效率 　　ES6新增的一些特性： 　　1）let声明变...
ES5和ES6区别浅析
wangzunkuan的博客
07-27 7414
前言 JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言，用来给HTML网页增加动态功能，具体概念不做过多的说明。这里说一下JavaScript的主要组成： 【组成一】 ECMAScript（核心） ECMAScript是JS的核心，它规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象 ...
ES5及ES6
happy_kx的博客
04-02 333
ES5内容 es5 ecmascript 5 （2009年发布的） 1.严格模式（普通编码的话叫做怪异模式） 'use strict' 1.1 必须要使用var声明 1.2 this不能指向全局变量 1.3 不能在不是方法块的里面定义函数 1.4 禁止8进制方法 1.5 arguements的形参不一致（不同步） 2.数组的高阶函数（以函数做为参数的函数叫做高阶函数） 2.1 静态方法isArray Array.isArray() //参数为任意类型 检查是否为数组类型 不是返回
ES6新特性
weixin_30826761的博客
03-24 190
什么是ES6 ECMAScript6在保证向下兼容的前提下，提供大量新特性，目前浏览器兼容情况如下： ES6特性如下： 1.块级作用域 关键字let, 常量const 2.对象字面量的属性赋值简写（property value shorthand） 1 var obj = { 2 3 // __proto__ 4 5 __proto__: the...
ES5 和 ES6区别
03-29
ES5 和 ES6 是 JavaScript 的两个版本，两者之间有以下区别： 1. 变量声明方式不同：ES5 使用 var 声明变量，ES6 使用 let 和 const 声明变量。 2. 箭头函数：ES6 引入了箭头函数，简化了函数的写法。 3. 模板...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值