ES6结构赋值/面向对象

1.块级作用域

类似于匿名函数

格式:

{

      xxx

}

可以解决密封空间的问题

ps:var没有块的概念

例1-1:


代码(i是var类型的)


结果(三个按钮均为3)

例1-2:


代码(i为let类型)


结果

例1-3:


代码


结果(点击1变色)


结果(点击2变色)


2.结构赋值

格式:

结构赋值格式

ps:数组,JSON均可

例2-1:

json结构赋值

JSON:key值必须对应

例2-2:


结构赋值实例


3.bind

与call类似

call:

任何函数都可以用call调用自己;

call的第一个参数就是函数的this;

第二个参数之后就是函数的形参。

bind:

任何函数都可以用bind调用自己;

bind的第一个参数就是函数的this;

第二个参数之后就是函数的形参;

不会调用自己,加括号可调用。


例3-1:


代码

this对应1;x对应10;y对应20


结果

例3-2:


代码

-->浏览器没反应

例3-3:

代码(多了个括号)


结果

例3-4:

代码

this对应1;x对应2;y对应3

例3-5:


代码

同上,this对应1;x对应2;y对应3,

两个括号相当于一个


4.面向对象

[1]ES6之前


1.类

2.原型(prototype 别名:方法)

3.原型链


示意图

类的上一级是Object

查找原型:xxx.prototype;

查找类:typeof  'xxx';

.constructor 方法能精准的查找对应的类

附加知识:字符串转数组用     x.split(' ')

call/bind 可以使所有方法通用

如:


使array的方法join给字符串'abcd'

->3.原型链

__proto__


示意图

[2]ES6里


1.类 class

无变量提升

格式:

class 名{

    constructor(){

    }

}

例1:


代码


结果

例2:


代码

constructor(){}里放私有属性

结果

2.继承

extends

子继承父所有的东西,父变化会影响子,子变化不影响父

例:


代码


结果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容