前端常见面试题之构造函数原型prototype

前端常见面试题之构造函数原型prototype

JS规定每一个构造函数都有一个prototype属性,指向另一个对象,这里值得注意的是prototype就是一个对象,而这个对象的所有属性和方法,都会被构造函数所拥有。
为了让所有实例对象可以共享我们的方法,我们可以采用prototype,将不变的方法直接定义在prototype对象上。
所谓的原型:就是一个对象,我们也将prototype称为原型对象。
原型的作用:可以让我们共享方法。
为啥要使用原型:
因为构造函数方法虽然好用,但是存在内存浪费的问题,每实例化一个对象的方法,就开辟一片内存,这样就会造成内存浪费。原型的出现可以让我们去共享这些方法,减少内存的消耗。
上代码,怎么使用

<script>
	function User(username,age,sex){
		this.username = username;
		this.age = age;
		this.sex = sex;
		
		//以往直接写的方法,会造成内存浪费
		//this.skill = function(){
		//	console.log('阿泽快乐敲代码');
		//}
	}
	//使用prototype来实现共享,减少内存消耗
	User.prototype.skill = function(){
		console.log('阿泽快乐敲代码');
	}

	var aze = new User('可乐阿泽',24,'男');
	var cola = new User('可乐',20,'女');

   aze.skill();//这两个实例可以共享skill方法
   cola.skill();
</script>

使用prototype来实现共享方法,其他的属性我们就一般放到构造函数中便可。就好比上面定义好的username、age、sex等属性,一般放到构造函数中去就OK。

新的问题来了,为什么我们定义到的是prototype的skill上,但是我们可以直接通过 实例对象.函数的方式拿到共享的方法呢?

其实,对象还有一个属性叫__proto__,我们使用构造函数的时候会帮我们自动生成一个对象原型proto, 这样的话我们就可以通过 实例对象.函数的方式获取到内容了。

当我们尝试输出一下上面的aze对象,会发现有一个__proto__属性,这个就是系统自动为我们添加上去的可以让我们指向构造函数的原型对象。

方法的查找规则:
先看看我们的实例化对象有没有skill方法,如果有就直接执行这个对象上的skill方法。如果没有skill方法。由于我们有__proto__,就可以通过其去查找原型对象prototype上的skill方法。

前端常见面试题之构造函数原型prototype_第1张图片
完美!

你可能感兴趣的:(前端面试题,前端,javascript)