原生JS中的類、靜態方法、繼承以及單例模式

原生JS中的類、靜態方法、繼承

ES5中的實例方法和靜態方法

function Person(name,age){
	//構造函數中的方法和屬性
	this.name = name;
	this.age = age;
	this.run = function(){
		console.log(`${this.name}---${this.age}`)
	}
}

//原型鏈上的屬性和方法；可以被多個實例共享
Person.prototype.sex = 'boy';
Person.prototype.work = function(){
	console.log(`${this.name}---${this.age}---${this.sex}`)
}

//靜態方法
Person.setName = function(){
	console.log('static function')
}

//實例方法是通過實例化來調用的；靜態方法是通過類名直接調用
var p = new Person('smileyqp',18);
p.run();
p.work()

Person.setName();	//執行靜態方法

ES5中的繼承

• 原型鏈+對象冒充的組合繼承

function Person(name,age){
	//構造函數中的方法和屬性
	this.name = name;
	this.age = age;
	this.run = function(){
		console.log(`${this.name}---${this.age}`)
	}
}
//原型鏈上的屬性和方法
Person.prototype.work = function(){}

function Web(name,age){
	Person.call(this，name,age);		//1、對象冒充繼承
}
Web.prototype = new Person();	//2、原型鏈繼承

var web = new Web('smileyqp',16);

原型鏈繼承和對象冒充集成的優缺點

• 對象冒充繼承：Person.call(this，name,age);

  • 缺點：

    • 沒法繼承原型鏈上的屬性和方法

      //例如上面的代碼
      web.run();		//smileyqp---16
      
      web.work();			//Not Found；因為這是原型鏈上的方法，對象冒充的方法不可以繼承
      

• 原型鏈繼承：Web.prototype = new Person()

  • 優點：可以繼承原型鏈上的屬性和方法

  • 缺點：實例化的時候沒法給父類傳參

    Web.prototype = new Person();	
    //實例化的時候沒有辦法將參數`var web = new Web('smileyqp',16)`中參數傳給父類進行實例化
    

ES6中定義一個類（class）

class Person{
	//構造函數
	constructor(name,age){
		this._name = name;
		this._age = age;
	}
	getName(){
		console.log(this._name)
	}
	setName(name){
		this._name = name;
	}
	getInfo(){
		console.log(`name:${this.name};age:${this.age}`)
	}
}

var p = new Person('smileyqp',20);	//實例化會執行構造函數
p.setName('yqp')
p.getName();	//yqp
p.getInfo();	//name:smileyqp;age:20	這個getInfo方法是繼承父類的getInfo方法

ES6中繼承(extends、super)

class Web extends Person{
	constructor(name,age,sex){
		super(name,age);	//實例化自雷的時候將自雷的數據傳遞給父類
		this.sex = sex;
	}
	proint(){
		console.log(this.sex)
	};
}
var w = new Web('smileyqp',18,'girl');
w.print();	//girl

ES6中靜態方法

class Person{
	constructor(name,age,sex){		//構造方法
		this.sex = sex;		//屬性
	}
	proint(){		//實例方法
		console.log(this.sex)
	};
	
	//靜態方法
	static work(){
	
	}
}
//調用靜態方法
Person.work();


//ES6中也可以直接給類綁定一個靜態方法
Person.instance = '這是一個實例,這是一個靜態方法';

console.log(Person.instance)

單例模式

有多個實例的時候構造函數只調用一次

class Db{
    static getInstance(){       //單例
        if(!Db.instance){
            Db.instance = new Db();
        }
        return Db.instance;
    }
    constructor(){
        console.log('實例化會觸發構造函數！')
        this.connect();
    }

    connect(){
        console.log('連接數據庫！')
    }
    find(){
        console.log('查詢數據庫！')
    }
}

//d1會進入構造函數；實例化d2和d3則不會
var d1 = Db.getInstance();
var d2 = Db.getInstance();
var d3 = Db.getInstance();