JS之面向对象

一,面对对象初始

为什么要学习对象:1,js获取页面元素,操作页面元素内容与样式,数据面对对象思想让操作数更加便捷与容易

优点:1,拓展性强,2,减少代码冗余3,降低成本
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>面向对象</title>
</head>
<body>
	<h1>面向对象</h1>
	<hr>
</body>
<script>
	//创建一个对象(对象一定拥有属性和方法)
	var obj = {}
	// 属性(可以对对象任意添加属性和方法)
	obj.name = "大毛";
	obj["age"] = 18;
	// 打印对象
	console.log(obj);
	// 使用属性
	console.log(obj["name"]);
	console.log(obj.age);

	// 方法
	obj.eat = function () {
		console.log("吃吃吃!!!");
	}
	// 方法的使用
	obj.eat();
	// 属性|方法的移除
	delete obj.name
</script>
</html>

二,对象属性解决循环绑定变量污染问题

1,对象的(临时)属性可以帮助临时数据的存储,因为临时数据的生命周期往往很短,需要提示临时数据生命周期

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>属性解决变量污染</title>
	<style type="text/css">
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		li {
			width: 80px;
			height: 35px;
			background-color: pink;
			border-radius: 5px;
			float: left;
			margin-left: 3px;
		}
	</style>
</head>
<body>
	<ul>
		<!-- 通过html方式给标签添加全局属性 -->
		<li arg="10"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
<script>
	//需求:存在五个方块,点击哪个跳出来哪个方块的索引
	var lis = document.querySelectorAll('li');
	for (var i = 0; i < lis.length; i++) {
		// 给每一个li设置一个(临时)属性
		lis[i].index = i;
		lis[i].onclick = function () {
			// var temp = lis[i].index; // lis[i]中的i一样存在变量污染
			var temp = this.index;
			alert(temp);
		}
	}
</script>
</html>

2,可以在js中为html中的每个对象添加属性和方法,但是在Htmlh中添加的属性和方法无法在js中获取

可以在js中用[属性]当做选择器,更改Html中的属性

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>属性解决变量污染</title>
	<style type="text/css">
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		li {
			width: 80px;
			height: 35px;
			background-color: pink;
			border-radius: 5px;
			float: left;
			margin-left: 3px;
		}
	</style>
</head>
<body>
	<ul>
		<!-- 通过html方式给标签添加全局属性 -->
		<li arg="10"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
<script>
	var lis = document.querySelectorAll('li');

	console.log(lis); 
	console.log(lis[0]); 
	// 对象可以添加属性与方法 | 万物皆对象
	//为lis对象添加属性
	lis.name = "元素集合";
	console.log(lis.name); 
	//为特定的lis[0]添加方法,可以及时调用
	lis[0].fn = function (x) {
		console.log('li fn');
		console.log(x)
	}
	lis[0].fn(); 

	// 通过html方式给第一个li添加了一个全局属性arg
	console.log(lis[0].arg);  // js无法直接获取
</script>
<style type="text/css">
	li[arg="10"] {
		background-color: orange;
	}
</style>
</html>

三,构造函数(万物皆对象)

构造函数起始就是普通函数(也就是python中的类,实例化得到对象,得到的每一个对象都拥有相同的属性)

特定的语法和规定

1.一般采用首字母大写(大驼峰)
2.内部可以构建属性与方法,通过this关键词

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>构造函数</title>
</head>
<body>
	<h1>构造函数</h1>
	<hr>
</body>
<script>
	//普通函数
	function fn() {
		var num = 10;
		console.log('普通函数');
	}
	fn();
	//下面定义函数,一般使用首字母大写,通过this关键字
	function People(name) {
		this.name = name;
		this.eat = function (agr) {
			console.log(this.name + "吃" + agr);
		}
	}

	var p1 = new People("zero");
	var p2 = new People("one");
	// 使用属性(p1和p2就是函数创建出来的对象)
	console.log(p1.name);
	console.log(p2.name);
	// 使用方法:调用函数方法下面的方法,直接用对象调用
	p2.eat("霸王餐");
</script>
</html>

四,对象字典结构的使用

js中没有字典(键值对存储数据的方式),但可以通过对象实现字典方式存储数据,并使用数据

1,key全为字符串形式,但存在两种书写方式(key在js标识符语句支持情况下,可以省略引号,但Key为js标识符不支持的语法情况下,必须添加引号)

2,value可以为任意类型

3 访问值可以通过字典名(对象名).key语法与["key"]语法来访问value

4.可以随意添加key与value完成增删改查
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>对象类字典结构的使用</title>
</head>
<body>
	<h1>对象类字典结构的使用</h1>
	<hr>
</body>
<script>
	var dict = {
		key1: "value1",
		key2: 18,
		"my-key3": [1, 2, 3, 4, 5]
	}
	// 增
	dict.key4 = true;
	console.log(dict);

	// 删
	delete dict.key4;
	console.log(dict);

	// 改
	dict["my-key3"] = [5, 4, 3, 2, 1];
	console.log(dict);

	// 查
	console.log(dict.key1);
	console.log(dict["key1"]);
</script>
</html>

五,ESS下继承关系

面向对象的的三大特征,继承,封装,多态(js重点:继承)

1.完成继承,必须拥有两个构造函数
2.一个函数要使用另外一个函数的属性与方法,需要对其进行继承(属性与方法的复用)
3.属性的继承call方法,在继承函数中由被继承函数调用,传入继承函数的this与被继承函数创建属性对属性进行赋值的所有需要的数据,eg:如Sup有name属性,那么可以通过call将Sub的name传给Sup
4.方法的继承prototype原型,将new Sup赋值给Sub.prototype
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>ES5下继承关系</title>
</head>
<body>
	<h1>ES5下继承关系</h1>
	<hr>
</body>
<script>
	// 类似于父级
	function Sup(name) {
		// 属性存放某个值
		this.name = name;
		// 方法完成某项功能
		this.func = function () {
			console.log("func");
		}
	}
	//由父级实例化形成一个对象
	var sup = new Sup("supClass");
	console.log(sup.name);
	sup.func();

	// 类似于子级
	function Sub(name) {
		// 属性的继承
		Sup.call(this, name);
	}
	// 方法的继承
	// Sub.prototype = new Sup;

	var sub = new Sub("subClass");
	console.log(sub.name);
	sub.func();

	// 原型
	console.log(sup.__proto__);

</script>
</html>

六,ES6面向对象

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>ES6面向对象</title>
</head>
<body>
	<h1>ES6面向对象</h1>
	<hr>
</body>
<script>
	// 单一对象
	let obj = {
		name: "ooooobj",
		// 方法
		fn () {
			console.log("fnnnnnnnn");
		}
	}
	console.log(obj.name);
	obj.fn();

	// 函数
	let f = () => {
	}
</script>
<script type="text/javascript">
	// 多对象 => 创建类
	class Person {
		// 构造器:创建对象完成初始化操作
	    constructor (name, age) {
	        this.name = name;
	        this.age = age;
	    }
	    // 实例方法:只能由对象调用
	    eat () {
	        console.log(this.name + '吃吃吃');
	    }
	    // 类方法:只能由类调用
	    static create () {
	        console.log('诞生');
	    }
	}
	let p1 = new Person('zero', 8);
	let p2 = new Person('seven', 58);

	console.log(p1.age);
	p2.eat();
	// Person.eat();
	Person.create();
	// p2.create();


	// 继承
	class Student extends Person {
		constructor (name, age, sex) {
			// super指向父级
			super(name, age);
			this.sex = sex;
		}
	}

	let s1 = new Student("张三", 18, "男");
	// 属性的继承
	console.log(s1.name, s1.age, s1.sex);
	console.log();
	// 方法的继承
	s1.eat();
	// 继承为全继承
	Student.create();

</script>
</html>

七定时器

应用场景:1,完成js自启,(不需要手动触发)动画

2,css完成不了的动画

清除定时器:允许除服清除(也可以清除不存在的定时器编号)

1,持续性与一次性定时器通常都应该有清除定时器操作

2,清除定时器操作可以混用 clearTimeout() 或者 clearInterval()

3,定时器的返回值就是定时器编号,就是普通的数字型

/* 异步执行
	setTimeout(函数, 毫秒数, 函数所需参数(可以省略));
*/
	console.log("开始");
	setTimeout(function (data) {
		console.log(data);
	}, 1000, "数据");
	console.log("结束");
// 持续性定时器
/*异步执行
	setInterval(函数, 毫秒数, 函数所需参数(可以省略));
*/
	console.log("又开始");
	var timer = setInterval(function() {
		console.log("呵呵");
	}, 1000)
	console.log(timer);
	console.log("又结束");

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>定时器</title>
</head>
<body>
	<h1>定时器</h1>
	<hr>
</body>
<script>
	//创建一个定时器
	console.log("开始");
	setTimeout(function (data) {
		console.log(data);
	}, 1000, "数据");
	console.log("结束");
	//创建另一个定时器
	console.log("又开始");
	var timer = setInterval(function() {
		console.log("呵呵");
	}, 1000)
	console.log(timer);
	console.log("又结束");

	// 清除所有定时器
	// 如果上方创建过n个定时器,那么timeout值为n+1
	var timeout = setTimeout(function(){}, 1);
	for (var i = 0; i < timeout; i++) {
		// 循环将编号[0, n]所有定时器都清除一次
		clearTimeout(i)
	}
</script>
</html>

猜你喜欢