JS进阶知识——(三)对象高阶知识

最新推荐文章于 2024-05-27 17:00:50 发布

MQY_study

最新推荐文章于 2024-05-27 17:00:50 发布

阅读量120

点赞数 1

分类专栏： JS学习文章标签： python 开发语言

本文链接：https://blog.csdn.net/js_bbasic/article/details/127940565

版权

JS学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JS中的对象和函数拥有相同的地位，对于面向对象的脚本语言JS来说对象的理解是学习JS和开发JS项目的基石。

文章目录

前言

对象是一种复合的数据类型，在对象中可以存储多个不同数据类型的属性。

JS中的对象有宿主对象内建对象和自定义对象三种。

内建对象由 ES 标准中定义的对象，在任何 ES 的实现中都可以使用。例如：Math、String、

宿主对象由 JS 的运行环境提供的对象、目前来讲主要指由浏览器提供的对象。比如：BOM（浏览器对象模型）、DOM（文档对象模型）。

一、创建JS对象的几种常用方法

1.1 Object 创建对象模式

<title></title>
	</head>
	<!-- 
	 -->
	<body>
		<script type="text/javascript">
			//方法一object创建函数对象 适用于不确定对象内部属性的情况下 数量/属性等   问题：语句太多 繁杂
			var per = new Object()
			per.name = 'Tom'
			per.age  = 12 
			per.setName = function ( name ) {
				this.name = name 
			}
			
			//test
			per.setName('jack')
			console.log(per.name)
		</script>

1.2 对象字面量方式创建

		<title></title>
	</head>
	<!-- 
	 方法二 对象字面量形式
	 使用场景 起始hi对象内部的呃数据已经确定的
	 问题：
	 如果创建多个对象，有重复的代码。
	 
	 -->
	<body>
		<script type="text/javascript">
			var p  = {
				name:'tom',
				age:12,
				setName:function(name){
					this.name = name 
				}
			}
			p.setName("mqqy")
			console.log(p.name)
			
		</script>

1.3 工厂模式创建对象；

	</head>
	<!-- 
	 方法三 通过工厂函数动态创建对象并返回
	 
	 -->
	<body>
		<script type="text/javascript">
			function crePer (name,age){
				var obj = {
					name:name,
					age:age,
					setName:function(name){
						this.name = name 
					}
				}
				return obj
			}
			//创建两个人
			var p1 = crePer ('tom',12)
			var p2 = crePer ('jack',18)
			console.log(p1,p2)
			//创建简单 可以快速创建多个一类对象
			
			function creStu (name,price){
				var obj = {
					name: name,
					price: price
				}
				return obj
			}
			var s1 = creStu('张三',10000)
			//p1  p2  s1 全都是object类型  所以创建出来的对象没有一个具体的类型 都是Object类型
			//有的时候,
		</script>

1.4 自定义构造方式

		<title></title>
		<!-- 
		 自定义构造函数模式
		 
		 -->
	</head>
	<body>
		<script type="text/javascript">
			function Person (name,age){
				this.name = name 
				this.age = age 
				this.setName = function (name){
					this.name = name
				}
			}
			var p1 = new Person ('tom' , 12)//p1 就是Person 对象类型
			//同样地 用这样的新建对象方法创造出的 s1就是具体的Student 类型.
			//问题 每个人对象都有相同的 数据 浪费内存.
		</script>

1.5 构造函数＋原型组合模式

		<title></title>
	</head>
	<!-- 
	 
	 
	 
	 
	 
	 -->
	<body>
		<script type="text/javascript">
			function Person (name,age){//在构造函数中只初始化一般函数
				this.name = name
				this.age = age
			}
			Person.prototype.setName = function (name){//方法在原型对象中添加.
				this.name = name
			}
		</script>

二、继承；

JS作为基于对象的弱类型语言，继承也是其非常强大的特性之一。

Js中的继承不像java一样通过类进行继承，而是通过一种叫做原型链的方式来实现的

2.1 方法一——原型链继承

		<title></title>
		<!-- 
		 方法一:原型链继承
		 -->
	</head>
	<body>
		<script type="text/javascript">
		
			//父类型
			function Supper(){
				this.supProp = 'Supper property'
			}
			Supper.prototype.showSupperProp = function (){
				console.log(this.supProp)
			}
			//子类型
			function Sub(){
				this.subProp = 'sub property'
			}
			Sub.prototype.showSubProp = function (){
				console.log(this.subProp)
			}
			
			// sub.showSupperProp()//找不到 两个函数现在还没有交集 sub的原型链上没有这个函数.
			// sub.toString()//之所以有这个 是因为内部有 Sub.prototype = new Object()
			//为了让sub能用上面的类型的方法 需要 使得
			// 子类型的原型 为 父类型的一个实例对象
			Sub.prototype = new Supper()//这一点很重要 实现了子类型对父类型方法的继承.
			Sub.prototype.constructor = Sub //让子类型的原型的constructor再次重新指向正确的子类型(不写这个会指向Supper)
			var sub = new Sub()
			sub.showSupperProp()//调用成功
			
		</script>

2.2 方法二——构造函数继承

		<title></title>
		<!-- 
		 方法二 借用构造函数继承
		 -->
	</head>
	<body>
		<script type="text/javascript">
			function Person(name,age){
				this.name = name
				this.age = age
				
			}
			function Student ( name,age,price){
				Person.call (this,name,age)//相当于 this.Person(name,age) 借用this执行person的方法
				this.price = price
			}
			var s = new Student ('tom', 20 , 1400)
			console.log(s.name,s.age,s.price)//这是call函数的应用 其实不算继承
		</script>

2.3 方法三——组合继承

		<title></title>
		<!-- 
		 
		 
		 -->
	</head>
	<body>
		<script type="text/javascript">
			function Person(name,age){
				this.name = name
				this.age = age
				
			}
			Person.prototype.setName = function (name){
				this.name = name
			}
			function Student ( name,age,price){
				Person.call (this,name,age)//相当于 this.Person(name,age) 借用this执行person的方法
				this.price = price
			}
			Student.prototype = new Person()//使得Person是Student的父类形 使得子类型能看到父类型的方法
			Student.prototype.constructor = Student //修正constructor属性
			Student.prototype.setPrice = function (price){
				this.price = price
			}
			var s = new Student('tjksj',25,1515415)
			s.setName('mqy')
			s.setPrice(140000)
			console.log(s.name,s.age,s.price)
			
		</script>