JavaScript-静态属性和静态方法

先看第一个例子

class Cat {
	MyName = '德玛';
}
let cat1 = new Cat();
console.log(cat1.hasOwnProperty('MyName')); //true

很显然 name='德玛'相当于this.name='德玛'；这是实例属性，而不是静态属性，静态属性需要用static修饰

class Cat {
	static MyName = '德玛';
}
let cat1 = new Cat();
console.log(cat1.hasOwnProperty('MyName')); //false
console.log(Cat.hasOwnProperty('MyName')); //ture
console.log(Cat.MyName); //'德玛'

说明静态属性就是类的属性。

静态属性也可以继承：

class Cat {
	static myName = '德玛';
}
class TomCat extends Cat {
	constructor(props) {
		super(props);//这个作用是继承实例属性和实例方法
	}

}
console.log(TomCat.myName); // 德玛

静态方法中调用其它静态属性和方法：

class Cat {
	static MyName = '德玛';
	static p1 = function() {
		console.log(this.MyName);
	}
	static p2 = function() {
		this.p1();
	}
}
let cat1 = new Cat();
//cat1.p1();//error
Cat.p1(); //德玛
Cat.p2(); //德玛

实例方法调用静态属性/方法：

class Cat {
	static MyName = '德玛';
	static p1 = function() {
		console.log(this.MyName);
	}
	constructor() {
		this.p3 = function() {
			Cat.p1();//使用静态属性相同，Cat.MyName
			//或者使用
			//this.constructor.p1();
		}
	}
}
let cat = new Cat();
cat.p3(); //德玛

原型方法中调用静态属性/方法

class Cat {
	static MyName = '德玛';
	static p1 = function() {
		console.log(this.MyName);
	}

	constructor() {}
	p3() {
		console.log(Cat.MyName);
	}
}
let cat = new Cat();
console.log('p3' in cat); //true
console.log(cat.hasOwnProperty('p3')) //false 说明是原型
cat.p3(); //引用静态属性跟在实例方法中一致

最后还有一点疑惑的地方

class Cat {
	p1 = function() {}
	p2() {};
}
//p1是实例方法，不管后面赋值的是什么，跟p1='1'没有区别，都是实例
//p2是原型方法
//测试
let cat = new Cat();
console.log('p1' in cat && cat.hasOwnProperty('p1')); //true
console.log('p2' in cat && cat.hasOwnProperty('p2')); //false