javascript 原是什么 js原型是什么

转载

幸福的地图 2023-09-01 13:43:30

文章标签 javascript 原是什么 js 构造函数 html css 文章分类 JavaScript 前端开发

什么是原型？

话说在前头，去网上查询很多关于JS原型的解释的文章，其中有80%看了都会不知所云，大多数关于JS原型的解释的文章或者视频，都忽略了很多读者对一些专业名词、概念是不掌握的，或许你说的一句话，就可以绕晕读者，导致大家走了很多很多弯路.所以我就来谈谈我对原型的理解及它的作用.

其实原型就相当于css中的class，修改它可以影响一类元素给对象添加方法，类似于行间样式给原型添加方法，类似于class

谈到原型就不得不谈到构造函数了和原型对象了
构造函数大家都知道
var 变量名 = new 构造函数（）；

这个new有什么用呢？

这个new帮你做两件事一个是替你创建了一个空白对象
还有就是帮你返回了这个对象

不加new可不可以，也可以就是的自己在构造函数中声明个
var obj = new object();
然后在构造函数最后一行返回这个obj就可以了
return obj；
但是不加new函数里边的this是Window
加了new函数里边的this就是这个系统投投帮你创建的空白对象了
大家可以尝试一下，加不加new输出一下this，看看分别都是什么

下面上重头戏了，我给大家举个例子，大家就知道为什么要用原型了

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<script>
	function Person(name , age) {
  	 	this.name = name;
   	 	this.age = age;
   	 	this.show=function () {
        alert("姓名："+this.name+"      年龄："+this.age);
   		}
	}
	var p1 = new Person("张三", "15");
	p1.show();
	var p2 = new Person("李四", "14");
	p2.show();
	alert(p1.show===p2.show);
</script>
</body>
</html>

javascript 原是什么 js原型是什么_js

javascript 原是什么 js原型是什么_构造函数_02

大家看我这段代码没有问题吧，p1和p2两个人都调用了show方法，也都出来了，但是p1.show()与p2.show是一个方法吗？我们来验证一下

大家看这两个方法不是同一个方法，这就很恐怖了，每new出来一个对象，他们里面的方法虽然长得一样，可却不是同一个方法，这就造成了资源的严重浪费，该怎么解决呢，这就用到了原型(prototype),下面我再上一段代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<script>
	function Person(name , age) {
    	this.name = name;
    	this.age = age;
	}
	Person.prototype.show=function () {
    	alert("姓名："+this.name+"      年龄："+this.age);
	};
	var p1 = new Person("张三", "15");
	p1.show();
	var p2 = new Person("李四", "14");
	p2.show();
	alert(p1.show===p2.show);
</script>
</body>

javascript 原是什么 js原型是什么_css_04