ES6结构赋值/面向对象

2018-11-22  本文已影响0人  KEN_CHEN

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

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

例:

代码 结果
上一篇下一篇

猜你喜欢

热点阅读