js的回炉重造之对象篇

最新推荐文章于 2024-08-25 09:57:22 发布

开源首席特技师

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量228

点赞数 1

分类专栏：学习笔记文章标签： js 前端对象思想

本文链接：https://blog.csdn.net/qq_28919991/article/details/82946264

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS分三个部分：(回顾)
ECMAScirpt ----基础的语法
Dom ----(Document Object Model)文档对象模型
Bom ----(Browser Object Model)浏览器对象模型

要求：
面向对象思想：突出需求，找对象，对象解决，得出结果
面向对象的特性：封装，继承，多态
掌握面向对象的编程思想

构造对象的三种方法
第一种：(字面量构造)

		var Dog = {
			Drink : function () {
				console.log("我在喝牛奶");
				return this;
			},
			Eat : function () {
				console.log("这牛排不错");
				return this;
			}
		}
		//this即为该对象 所以可以连续调用这些方法
		//例如：Dog.Drink().Eat() 将执行两个方法

第二种：系统的构造函数

var Dog = new Object();
Dog.name = "狗";

第三种：自定义构造函数（推荐）

function Dog() {
	this.Drink = function () {
		console.log("我在喝牛奶");
		//return this;
	}
	this.Eat = function () {
		console.log("这牛排不错");
		//return this;
	}
}
var dog = new Dog();

第三种方法有延伸的用法，我们把它叫做工厂模式
它的原理是用闭包的方法来构造函数

function Dog() {
	var obj = new Object();
	obj.Drink = function () {
		console.log("我在喝牛奶");
		return this;
	}
	obj.Eat = function () {
		console.log("这牛排不错");
		return this;
	}
	return obj;
}
var per = Dog(); //调用的是方法，不是实例化对象

当我们要创建一百个甚至更多时，有些公用的方法或者变量将占用大量的空间
这降低了javascript的性能，所以出现了原型对象简称原型
它的作用之一就是实现数据共享、节省空间

function Dog() {
	this.Drink = function () {
		console.log("我在喝牛奶");
		//return this;
	}
	this.Eat = function () {
		console.log("这牛排不错");
		//return this;
	}
}
Dog.prototype.name = "老狗";
var dog = new Dog();

在dog这个对象中并没有name这个属性，但是在它的__proto__对象中有name：“老狗”这个属性
这个属性并没有占用实例化对象的空间，而是保存在他的原型对象中

console.log(dog.__proto__ == Dog.prototype); //结果为true
console.log(dog.__proto__.constructor == Dog.prototype.constructor);//结果为true

以上说明：
__proto__与prototype都指向原型对象
dog这个实例对象的原型对象对象就是Dog这个构造函数的原型对象

实例化对象、构造函数与原型对象之间的关系如下
三者之间的关系

利用面对过程的编程思想与面对对象的编程思想分别来实现同一个效果
点击按钮将div块的宽、高、颜色改变

面对过程的编程思想

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Proto</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		div{
			width:200px;
			height:200px;
			background-color: red;
		}
	</style>
</head>
<body>
<div id="div"></div>
<input type="button" id="btnid" value="Change">
	<script>
		var div =document.getElementById("div");
		var btn =document.getElementById("btnid");
		btn.onclick = function () {
			 div.style.width = "500px";
			 div.style.height = "500px";
			 div.style.backgroundColor = "yellow";	
		}
	</script>
</body>
</html>

2.面对对象的编程思想

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Proto</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		div{
			width:200px;
			height:200px;
			background-color: red;
		}
	</style>
</head>
<body>
<div id="div"></div>
<input type="button" id="btnid" value="Change">

	<script>
		window.onload = function () {
			var div = document.getElementById("div");
			var btn = document.getElementById("btnid");
			function Change (divobj,btnobj,json) {
				this.divobj = divobj;
				this.btnobj = btnobj;
				this.json = json;
			}
			Change.prototype.init = function () {
				var that = this;
				this.btnobj.onclick = function () {
					for (var key in that.json) {
						that.divobj.style[key] = that.json[key];
					}
				}
			}
			var json = {"width":"500px","height":"500px","backgroundColor":"yellow"};
			var change = new Change(div,btn,json);
			change.init();
		}
	</script>
</body>
</html>

比较来看好像前者比后者更加方便，仔细一想：
1.当对象多起来时，一旦我们要更改属性写起来就是在重复造轮子；
2.一旦更改起来更是耗时耗力的工作
而后者我将要改变的属性都放在写在json中，以后我们要改变只需要打开json文件
更改即可

开源首席特技师

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的回炉重造之对象篇

JS分三个部分：(回顾)ECMAScirpt ----基础的语法Dom ----(Document Object Model)文档对象模型Bom ----(Browser Object Model)浏览器对象模型要求：面向对象思想：突出需求，找对象，对象解决，得出结果面向对象的特性：封装，继承，多态掌握面向对象的编程思想构造对象的三种方法第一种：(字面量构造) v...
复制链接

扫一扫

专栏目录