javascript中的this和prototype介绍

1、this

js函数中方的this在函数被调用之前是不确定的，this指向的是函数最后被调用的对象，例如:

可以看到，当第一次直接调用test('t1'),此时是window对象调用的，在调用方法之前window对象里没有fn_name属性，但是调用之后却多出来这个属性来；然后是通过obj来调用方法后，在obj方法里也有了这个属性。这就是通过this的作用做到的，它始终指向的是最后调用它的那个对象的。

 

2、prototype

注意：一下只是我个人的见解，需要详细了解prototype的可以看看这两篇文章：

https://blog.csdn.net/qq_42497250/article/details/92845285

https://blog.csdn.net/flyingpig2016/article/details/53048394

 

js中创建的每个函数都有一个prototype属性，这个属性是一个指针，指向一个对象（原型对象），这个对象包含了通过调用该构造函数所创建的对象共享的属性和方法。

当用prototype来为函数添加了新的属性和方法后，这些属性和方法都将给由该函数创建的实例共享使用。

来看看下面的代码:

function test(name)
{
	this.name = name;
	this.print_name = function()
	{
		console.log(this.name);
	}
}

var t1 = new test('t1');
var t2 = new test('t2');

console.log(t1.name === t2.name); //false
console.log(t1.print_name === t2.print_name); //false

这里由test()创建的两个实例，它们是分别从test()复制了一份属性和方法出来，所以用全等判断时是false。

再看看这个：

function test(name)
{
	this.name = name;
}
test.prototype.print_name = function()
{
	console.log( this.name);
}
test.prototype.age = 1;
var t1 = new test('t1');
var t2 = new test('t2');
console.log(t1.age === t2.age); //true
console.log(t1.print_name === t2.print_name); //true

这次两个实例的age属性和print_name()方法不再是复制的副本了，它们访问的是同一个属性和方法。在某个函数会创建很多实例时，如果每个实例又再次复制一个相同方法的副本的话，这显然不科学，通过prototype让多个实例共用一个方法，就可以解决这个问题了。

总结，对于函数创建的实例需要共享使用的属性和方法，我们可以使用prototype来创建，而那些只想让实例自己去改变的属性则应该用this去创建，例如上面的age，如果这个实例代表的是人的话，我们让两个实例共享肯定是不合理的，应该用用this。