JavaScript教程-38-JavaScript面向对象编程

最新推荐文章于 2024-01-07 18:00:00 发布

木易yves

最新推荐文章于 2024-01-07 18:00:00 发布

阅读量112

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_35938103/article/details/105207432

版权

javascript 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

1：JavaScript不是面向对象的一种编程语言，而是基于对象的。因为JavaScript是基于对象的一种脚本语言，所以没有所谓的类似java中类 class 的概念。但是我们可以通过JavaScript代码去模拟类的概念，让它看上去更像面向对象的。

2：下面我们通过示例，对比传统的创建对象的方式和模拟类创建对象的方式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模拟类</title>
		<script type="text/javascript">
			//1：传统的创建对象,创建对象，并设置属性和方法
			var obj = new Object();
			obj.name = "小刚";
			obj.age = 15;
			obj.gender = "男";
			obj.show = function(){
				alert("我的名字："+this.name);
			}
			//我的名字：小刚
			obj.show();
			
			//模拟类：1：使用工厂模式，模拟类 创建一个 人的对象
			function createPerson(name,age,gender){
				var obj = new Object();
				obj.name = name;
				obj.age = age;
				obj.gender = gender;
				obj.show = function(){
					alert("我的名字："+this.name);
				}
				return obj;
			}
			//创建person对象
			var person = createPerson("小兰",17,'女');
			person.show();//我的名字：小兰
			
			//模拟类：2：使用构造函数式
			function Person(name,age,gender){
				this.name = name;
				this.age = age;
				this.gender = gender;
				this.show = function(){
					alert("我的名字："+this.name);
				}
			}
			//通过类创建多个person对象
			var person1 = new Person("小马",18,"男");
			alert(person1.name);//小马
			person1.show();//我的名师：小马
			var person2 = new Person("小马1",20,"男");
			alert(person2.name);//小马1
			person2.show();//我的名师：小马1
			
			//测试person1和2是不是Person的实例
			alert(person1 == person2);//false  说明是不同的实例
			alert(person1.constructor == Person);//true 对象的属性 构造方法 是 Person
			//还可以通过instanceof 判断对象是否是Person的实例
			alert(person1 instanceof Person);//true
			alert(person2 instanceof Person);//true
			alert(person1 instanceof Object);//true   Object 是所有“类”的基类
			
			//总结：创建对象的方式
			//1：将Person当作构造方法去使用
			var p1 = new Person("翠花",20,"女");
			alert(p1.name);//翠花
			
			//2：将Person当作普通的方法去调用
			//注意，这个时候，Person 里面的this 指代的就是当前对象window
			//相当于把属性和方法给window 添加上了。
			Person("翠花1",21,"女");
			window.show();//我的名字：翠花1
			
			//3:通过其他的对象创建 通过 call、 apply 方法
			var per = new Object();
			//相当于把里面的this换成了 per 对象
			Person.call(per,"翠花2",22,"女");
			per.show();//我的名字：翠花2
			
			Person.apply(per,["翠花3",22,"女"]);
			per.show();//我的名字：翠花3
			
		</script>
	</head>
	<body>
	</body>
</html>

PS：笔者有大量的学习资料：java、python、大数据、人工智能、前端等。需要的小伙伴请加群：711408961

笔者的b站中有一些教学视频分享。感兴趣的小伙伴可以关注：https://space.bilibili.com/412362068

木易yves

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript教程-38-JavaScript面向对象编程

1：JavaScript不是面向对象的一种编程语言，而是基于对象的。因为JavaScript是基于对象的一种脚本语言，所以没有所谓的类似java中类 class 的概念。但是我们可以通过JavaScript代码去模拟类的概念，让它看上去更像面向对象的。2：下面我们通过示例，对比传统的创建对象的方式和模拟类创建对象的方式。<!DOCTYPE html><html...
复制链接

扫一扫