1. 程式人生 > 其它 >JS 建構函式與原型

JS 建構函式與原型

1 建構函式

	//建構函式
    function Fn(name) {
    	//新增例項成員-屬性
		this.name=name
		//新增例項成員-方法
    	this.a=function () {   console.log("例項成員");   }
    }
	
	//新增靜態成員-方法
	Fn.b=function () {   console.log("靜態成員");   }
	
	//新增原型方法
    Fn.prototype.a=function () {   console.log("原型方法a");   }
    Fn.prototype.b=function () {   console.log("原型方法b");   }


	//例項化 - 建立物件
    let test = new Fn('223')
	
例項成員可以通過例項化物件訪問  console.log(test.a) //例項成員
靜態成員只能由建構函式本身訪問  console.log(Fn.b)   //靜態成員
原型通過例項化的物件訪問       console.log(test.b) //原型方法b

2 原型 (JS原型物件簡稱原型)


1 原型: 每個建構函式都有, 通過 函式名.prototype 可訪問

2 原型兩個預設屬性: 
 `constrcutor`(構造器): 指向函式本身
 `__proto__ `: 指向上一級(爸爸)的原型

3 原型: 包含所有例項*共享*的屬性和方法, 
(*共享* 每一個例項物件的屬性和方法不獨立,  不建立副本.  好處: 資料共享,節約資源)



//fn的結構
    function fn(name) {
		name=name
    	a=function () {   console.log("例項成員");   }
	}
	fn.prototype:{
		自己的方法與原型方法重名,優先自己的方法
		a=function () {   console.log("原型方法a");   }
		b=function () {   console.log("原型方法b");   }
		constructor: ƒ fn(name)
		__proto__

	}
	fn.prototype.__proto__:	{
		找不到本地方法,從原型鏈向上找
		1.  constructor: ƒ Object()
		2.  hasOwnProperty: ƒ hasOwnProperty()
		3.  isPrototypeOf: ƒ isPrototypeOf()
		4.  propertyIsEnumerable: ƒ propertyIsEnumerable()
		5.  toLocaleString: ƒ toLocaleString()
		6.  toString: ƒ toString()
		7.  valueOf: ƒ valueOf()
	}

3 原型鏈

1 用於查詢物件的屬性與方法, 有就用, 沒有undefined

2 優先順序: 非原型屬性方法 > 原型屬性方法 > 爸爸的原型屬性方法...
console.log(test.a) //例項成員
console.log(test.b) //原型方法b

3 建構函式的上一級是 Object  ,  Object.prototype.\_\_proto__=unll