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


1 构造函数补充

构造函数的函数名第一个字母大写(规则约定)。例如:Object、Array、Function等。
var obj = {}或new Object
var obj = []或new Array
var obj = function(){}或new Function([arg1[, arg2[, ...argN]],] functionBody)


多说一句:

new Function()的所有参数都写成字符串形式。例如:
let sum = new Function('a', 'b', 'return a + b');

这个方式与其他方式最主要的不同点在于,函数是由在运行时传入的字符串创建的。
之前的所有声明都要求程序员在脚本中编写功能代码。
但new Function允许将任何字符串转换为函数。例如,我们可以从服务器接收新函数然后执行它:

let str = ... receive the code from a server dynamically ...
let func = new Function(str);
func();

它在非常特殊的情况下使用,例如当我们从服务器接收代码时,或者使用模板动态编译函数。

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
posted @ 2022-02-23 22:56  波吉国王  阅读(85)  评论(0编辑  收藏  举报