es6之前：构造函数和原型

最新推荐文章于 2022-07-18 17:47:59 发布

落叶苍穹

最新推荐文章于 2022-07-18 17:47:59 发布

阅读量325

点赞数

本文链接：https://blog.csdn.net/weixin_42373873/article/details/103023479

版权

es6之前，通过构造函数+原型实现面向对象编程
es6:通过类实现面向对象编程
在es6之前，对象不是基于类创建的，而是用构造函数来定义对象和它们的特征。
首先我们来看两个概念：静态成员和实例成员
其实这个和java中的没有啥差别
看以下的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>静态成员和实例成员</title>
	</head>
	<body>
		<script>
		function Person(uname,age){
				this.uname=uname;
				this.age=age;
			}
			Person.prototype.sing=function(){
				console.log("无名之辈");
				
			}
			var zh=new Person("小小",18);
			var liao=new Person("大大",22);
			zh.sing();
			liao.sing();
			Person.sex='女';
			console.log(Person.sex);	
		</script>
		
	</body>
</html>

运行结果：
在这里插入图片描述
如上述代码所示：
1.uname,age就是实例成员
实例成员只能通过实例化的对象来访问，不可以通过构造函数来访问。
实例成员：就是构造函数内部通过this添加的成员
2. sex就是静态成员
静态成员只能通过构造函数来访问,不能通过对象来访问
静态成员：在构造函数本身上添加的成员

在我们根据需求写代码时，有些方法，我们想让其共享。
因此我们通过原型对象来实现方法的共享。
一般情况下，我们的公共属性定义到构造函数里，公共的方法放到原型对象身上。
看以下程序：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>构造函数和原型</title>
	</head>
	<body>
		<script>
			function Star(uname,age){
				this.uname=uname;
				this.age=age;
			}
			Star.prototype.sing=function(){
				console.log("无名之辈");
				
			}
			var zh=new Star("小小",18);
			var liao=new Star("大大",22);
			zh.sing();
			liao.sing();
			
		</script>
	</body>
</html>

在这里插入图片描述
观察运行结果，发现两个不同的对象调用这个方法，都可以得到结果。
每个对象都会有一个属性_proto_指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有_proto_原型的存在。
观察以下程序：

console.log(zh.__proto__===Star.prototype);

在这里插入图片描述
通过观察运行结果发现：
对象身上系统自己添加一个_proto_指向我们构造函数的原型对象。
总结：方法的查找规则：
首先先看该对象身上是否有s此方法，若有就执行这个对象上的方法；
如果没有这个方法，因为有_proto_的存在，就去构造函数原型对象prototype身上取查找这个方法。

再来看以下代码：

  console.log(Star.prototype);
   console.log(zh.__proto__);

在这里插入图片描述
观察上述结果：
原型里存在constructor属性
那么问题来了。这个属性指向的是什么呢？
深层解剖：

 console.log(Star.prototype.constructor)
   console.log(zh.__proto__.constructor)

在这里插入图片描述
结果发现它指回的是构造函数的本身。
JavaScript的成员查找机制
（1）当访问一个对象的属性时，首先查找这个对象自身有没有该属性
（2）如果没有就查找它的原型（即：_proto_指向的prototype原型对象)
(3)如果还没有就查找原型对象的原型(Object的原型对象)
（4）以此类推一直找到Object为止，Object里_proto_指向null

注：1.在构造函数中，this指向的是对象实例
2.原型对象函数里的this指向的也是实例对象
在此在提及一个方法：call()
它有两个作用：
1.call()可以调用函数
2.call()可以改变这个函数的this指向
观察以下程序：

	<script>
			
//1.父构造函数 
function Father(uname,age){
//this指向父构造函数的对象实例
this.uname=uname;
this.age=age;
}
//2.子构造函数
function Son(uname,age){
//把父的this改成子的this
Father.call(this,uname,age);
}
var son=new Son('小小',18);	
console.log(son);
		</script>

在这里插入图片描述
观察Father.call(this,uname,age);，它将父的this改成子的this，发现得到了我们想要的结果
这达到了借用父构造函数继承属性。

构造函数的特点：
1.构造函数有原型对象prototype
2.构造函数原型对象prototype里面有constructor指向构造函数本身
3.构造函数可以通过原型对象添加方法
4.构造函数创建的实例对象有_proto_原型指向构造函数的原型对象

落叶苍穹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
es6之前：构造函数和原型

es6之前，通过构造函数+原型实现面向对象编程es6:通过类实现面向对象编程在es6之前，对象不是基于类创建的，而是用构造函数来定义对象和它们的特征。首先我们来看两个概念：静态成员和实例成员其实这个和java中的没有啥差别看以下的代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"&...
复制链接

扫一扫