(一)箭头函数
1.单参数
function cheng0(a = 3) {
return a * a;
}
let cheng = (a = 3) => a * a;
console.log(cheng(9));
2.多参数
function add0(a, b) {
return a + b;
}
let add = (a, b) => a + b; //默认返回值
console.log(add(3, 9));
3.无返回值
function jian0(a, b) {
console.log(a + b);
}
let jian = (a, b) => {
console.log(a - b)
};//无返回值,用{}包裹
console.log(jian(3, 9));
4.多行,有其他表达式+return,用{}包裹
function chu0(a, b) {
console.log(a + b);
return a + b;
}
let chu = (a, b) => {
console.log(a + b);
return a + b;
};
console.log(chu(3, 9));
2.如果箭头表达式仅仅就是简化了函数的命名,我们为什么要改变原来的习惯而去使用它呢?
箭头函数内部没有constructor方法,也没有prototype,所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的 this 始终指向函数定义时的this,而非执行时。
var o = {
x : 1,
func : function() { console.log(this.x) },
test : function() {
setTimeout(function() {
alert(this); //this指针转为全局window
this.func();
}, 1000);
}
};
o.test(); // TypeError : this.func is not a function
//----改为箭头函数
var o = {
x : 1,
func : function() { console.log(this.x) },
test : function() {
setTimeout(() => { this.func() }, 100);
}
};
o.test(); //这回this就指向o了
(二)Class类
1. 普通类:属性,构造方法,普通方法(无重载)
class Person {
constructor(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = ['Shelby', 'Court'];
}
sayName() {
console.log(this.name);
}
}
let person = new Person('张三', 26, '司机');
person.sayName();//张三
2.静态方法:
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
//静态方法
static distance(a, b) {
const dx = a.x - b.x;
const dy = a.y - b.y;
return Math.sqrt(dx * dx + dy * dy);
}
}
const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
//取2点之间的距离:
console.log(Point.distance(p1, p2)); //7.0710678118654755
3.ES6明确规定,Class内部只有静态方法,没有静态属性,但可以用另外方式解决
class Foo {
}
Foo.prop = 1;
Foo.prop // 1
//---单例模式
class Cache {
constructor(id,name){
this.id = id;
this.name = name;
}
static getInstance() {
if(!Cache.instance) {
Cache.instance = new Cache();
}
return Cache.instance;
}
}
var cache = Cache.getInstance();
cache.id = 1;
cache.name = "wangdy";
console.log(cache)//Cache {id: 1, name: "wangdy"}
4.继承:
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' 叫了几声...');
}
}
//类继承(只有单继承)
class Dog extends Animal {
//方法的重写
speak() {
console.log(this.name + ' barks.');
}
}
//可以直接使用父类的构造方法
let dog = new Dog('旺财');
dog.speak();//旺财 barks.
//-------------------vue中loginbean的单例模式--------------------------
class LoginBean {
static getInstance() {
if (!LoginBean.instance) {
LoginBean.instance = new LoginBean();
}
return LoginBean.instance;
}
constructor() {
this.id = 0;
this.nicheng = null;
}
}
var loginbean = LoginBean.getInstance();
export default loginbean;