JavaScript课程——Day15（编程思想、对象的读写、面向对象的创建、面向对象的案例）
1、编程思想
- 面向过程：面向过程思想强调的是步骤，当碰见问题时，思考的是“我该怎么做”，分析出解决问题所需的步骤，一步步的去实现。
- 面向对象：面向对象思想强调的是对象，当碰见问题时，思考的是“我该让谁来做”。这个“谁”其实就是对象。找合适的对象做合适的事情。而对象如何去做（采用什么样的步骤）我们就不关心了，最终把问题解决掉就可以了。
相关概念：
var 对象 = { key1: value1, key2: value2, ... }
1.1、对象：无序的明值对
1.2、对象组成：
-
- 属性：对象的特征描述，静态，名词
- 方法：对象的行为，动态（函数）
1.3、对象的基本特征：封装、继承、多态（了解）
1.4、类和示例
-
- 类：类是对象的类型模板
- 实例：实例是根据类创建的对象
- 面向对象学习，就是学习创建类（模板），利用类生成实例（月饼）
2、对象的读写
var obj = { name: 'zs', age: 3, aa: undefined, job: function () { console.log(this); console.log('前端开发'); } }; // 读 console.log(obj.name); // 点的形式 console.log(obj['age']); // 中括号的形式 obj.job(); var v = obj.job; v(); // ------------------- // 写 // 如果原来存在这个属性，则就是修改，如果不存在，则是添加 obj.name = 'ls'; obj.sex = '男'; console.log(obj); // ---------------------- // 遍历 for (var attr in obj) { console.log(attr, '-----', obj[attr]); } // ----------------------- // in操作符：检查对象有某个属性没，返回布尔值 // 格式：key in 对象 // 区分清楚属性有不有和值没有一点关系 console.log('name' in obj); // true console.log('abc' in obj); // false console.log('aa' in obj); // true // ---------------------- // 删除对象的某个属性 // 格式：delete 对象.属性名; delete obj.aa; delete obj.job; console.log(obj);
3、面向对象的创建
3.1、字面量创建
var obj = { name: 'zs', age: 3, showNmae: function () { console.log(this.name); } } obj.showNmae(); var obj2 = { name: 'ls', age: 5, showNmae: function () { console.log(this.name); } } console.log(obj2.age); obj2.showNmae(); // 不足：适用于单个对象的创建，如果要创建多个对象，会代码冗余
3.2、实例创建
var obj = new Object(); // 实例 obj.name = 'zs'; obj.age = 3; obj.showName = function () { console.log(this.name); } console.log(obj); var obj2 = new Object(); // 实例 obj2.name = 'ls'; obj2.age = 5; obj2.showName = function () { console.log(this.name); } console.log(obj2); // 不足：适用于单个对象的创建，如果要创建多个对象，会代码冗余
3.3、工厂模式
// 工厂模式：归根到底是一个封装函数 function createPerson(name, age) { // 1、准备原料 var obj = new Object(); // 2、加工 obj.name = name; obj.age = age; obj.showNmae = function () { console.log(this.name); } // 3、出厂 return obj; } var o1 = createPerson('zs', 3); console.log(o1); var o2 = createPerson('ls', 5); console.log(o2); // 优点：可以大量创建 // 不足：不能标识出它是由谁创建的
instanceof
// 格式：对象 instanceof 函数 // 作用：运算符，一个对象是否为指定的构造函数的实例，返回布尔值 console.log([] instanceof Array); // true console.log([] instanceof Object); // true 因为Object是我们js世界里的老大，一切对象都是由它创建的 console.log(o1 instanceof createPerson); // false 这是工厂模式的不足，不能标识出由谁创建的 console.log(o1 instanceof Object); // true
3.4、构造函数模式
构造函数的特点：
1、构造函数名首字母大写（为了区分普通函数，不是必须，是约定）
2、构造函数方法没有显示的创建对象（new object()）
3、直接将属性和方法赋值给this对象
4、没有return语句，不需要返回对象
5、通过构造函数创建对象，必须使用new运算符（直接调用跟普通函数一样）
function CreatePerson(name, age) { this.name = name; this.age = age; this.showName = function () { console.log('小张'); } }
var p1 = new CreatePerson('zs', 3); console.log(p1); console.log(p1.showName) console.log(p1.name); p1.showName(); var p2 = new CreatePerson('ls', 5); console.log(p2); console.log(p2.showName) // 问题：同样的方法，在每个实例上都要重新生成，耗内存 console.log(p1.showName == p2.showName); // false
以这种方式调用构造函数实际上会经历以下4个步骤
（1）创建一个新对象；
（2）将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
（3）执行构造函数中的代码（为这个新对象添加属性）；
（4）返回新对象（隐式返回）。（因此p1就是这个新对象，同时p1也是this）
var o = CreatePerson('zs', 3); // 直接调用就是普通函数调用，则这些属性和方法加给了window，同时没有返回值，所以o是undefined。所以构造函数一定要能过new调用
对象的比较
// 基本类型，基本类型的比较，是值的比较 console.log(5 == 5); // true // 引用类型，引用类型的比较，是地址的比较 var a = []; var b = []; console.log(a == b); // false
3.5、原型创建对象
（1）原型
js每声明一个function，都有prototype原型，prototype原型是函数的一个默认属性，在函数的创建过程中由js编译器自动添加。
也就是说，当生产一个function对象的时候，就有一个原型prototype。原型中存储对象共享的属性和方法。
（2）原型链
当查找对象的属性的时候，先找自身，如果自身没有，则顺着__prototype__找到原型，如果原型也没有，则继续向上找，一直找到Object的原型。这个查找链表就是原型链。
// 原型对象：存储对象公共属性和方法的地方 // 每写一个函数，都会有一个原型对象prototype var arr = new Array(); // Array就是构造函数 console.log(arr); // arr就是实例 console.log(arr.__proto__); // 原型对象，通过实例找到原型 console.log(Array.prototype); // 原型对象，通过构造函数找到原型 console.log(arr.__proto__ == Array.prototype); // true
原型创建对象
function CreatePerson() { } // 每声明一个函数，都会有一个原型对象，原型对象默认有一个constructor的属性，它又指向构造函数 // console.log(CreatePerson.prototype); // CreatePerson的原型 {constructor: ƒ} // console.log(CreatePerson.prototype.constructor); // constructor CreatePerson.prototype.name = 'zs'; CreatePerson.prototype.age = 3; CreatePerson.prototype.showName = function () { console.log('小张'); } // console.log(CreatePerson.prototype); // -------------------------- var p1 = new CreatePerson(); console.log(p1); // console.log(p1.name); // p1.showName() // console.log(p1.constructor); // console.log(p1.toString); var p2 = new CreatePerson(); console.log(p2); console.log(p1.showName == p2.showName); // true // 优点：原型方法完美的解决了构造函数会方法会重复创建的问题 // 不足：不能似参，创建的结果都一样 console.log(p2.abc); // undefined
3.6、混合模式创建对象
// 是我们创建对象的标准方法 // 混合模式：构造函数+原型 // 每个对象独有的写在构造函数里，公有的写在原型上 function CreatePerson(name, age) { this.name = name; this.age = age; } CreatePerson.prototype.showName = function () { console.log(this.name); } var p1 = new CreatePerson('zs', 3); console.log(p1); // console.log(p1.name); // p1.showName(); var p2 = new CreatePerson('ls', 5); console.log(p2);
3.7、动态混合模式
// 动态混合模式 // 好处：代码有一个封装的感觉 // 执地原理：同混合模式 function CreatePerson(name, age) { this.name = name; this.age = age; if (typeof CreatePerson.prototype.showName !== 'function') { CreatePerson.prototype.showName = function () { console.log(this.name); } CreatePerson.prototype.showAge = function () { console.log(this.age); } } } var p1 = new CreatePerson('zs', 3); console.log(p1); var p2 = new CreatePerson('ls', 5); console.log(p2);
4、面向对象的案例
面向对象的选项卡
原则：先写出普通的写法，然后改成面向对象方法
1、普通方法变型
尽量不要出现函数嵌套函数
可以有全局变量
把onload中不是赋值的语句放到单独函数中（init）
2、改成面向对象（）
先写构造函数
onload中创建对象，并init调用
全局变量就是属性
函数就是方法
（属性和方法前面，都要加this）
改this指向问题（尽量让this指向对象）
结论：我们改成面向对象之后，感觉是不是更复杂了？确实是这样，确实是复杂了，但是我们这个面向对象特别适合复杂的开发，对于简单的，不太推荐使用面向对象。面对复杂开发时，它特别容易扩展，同时，复用性特别强。上面的例子，多添加几个，就可以发现特别方便复用和扩展。
普通方法实现和变形
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> span { display: inline-block; width: 100px; height: 30px; background-color: #ccc; line-height: 30px; text-align: center; color: white; cursor: pointer; } .active { background-color: red; } #box div { width: 330px; height: 150px; border: 2px solid #ccc; font-size: 40px; line-height: 150px; text-align: center; display: none; } </style> <script> // 普通方法实现 // window.onload = function () { // var box = document.getElementById('box'); // var span = box.querySelectorAll('span'); // var div = box.querySelectorAll('div'); // for (var i = 0; i < span.length; i++) { // span[i].index = i; // 自定义下标 // span[i].onclick = function () { // // 1、所有的span去掉样式，所有的div隐藏 // for (var i = 0; i < span.length; i++) { // span[i].className = ''; // div[i].style.display = 'none'; // } // // 2、当前的span加上样式，对应的div显示 // this.className = 'active'; // div[this.index].style.display = 'block'; // } // } // } // --------------------------------------- // 普通方法变形 var box = null; var span = null; var div = null; window.onload = function () { box = document.getElementById('box'); span = box.querySelectorAll('span'); div = box.querySelectorAll('div'); init(); } function init() { for (var i = 0; i < span.length; i++) { span[i].index = i; // 自定义下标 span[i].onclick = change; } } function change() { // 1、所有的span去掉样式，所有的div隐藏 for (var i = 0; i < span.length; i++) { span[i].className = ''; div[i].style.display = 'none'; } // 2、当前的span加上样式，对应的div显示 this.className = 'active'; div[this.index].style.display = 'block'; } </script> </head> <body> <div id="box"> <span class="active">html</span> <span>css</span> <span>js</span> <div style="display: block;">html</div> <div>css</div> <div>js</div> </div> </body>
改成面向对象
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> span { display: inline-block; width: 100px; height: 30px; background-color: #ccc; line-height: 30px; text-align: center; color: white; cursor: pointer; } .active { background-color: red; } #box div { width: 330px; height: 150px; border: 2px solid #ccc; font-size: 40px; line-height: 150px; text-align: center; display: none; } </style> <script> // var box = null; // var span = null; // var div = null; // window.onload = function () { // box = document.getElementById('box'); // span = box.querySelectorAll('span'); // div = box.querySelectorAll('div'); // init(); // } // function init() { // for (var i = 0; i < span.length; i++) { // span[i].index = i; // 自定义下标 // span[i].onclick = change; // } // } // function change() { // // 1、所有的span去掉样式，所有的div隐藏 // for (var i = 0; i < span.length; i++) { // span[i].className = ''; // div[i].style.display = 'none'; // } // // 2、当前的span加上样式，对应的div显示 // this.className = 'active'; // div[this.index].style.display = 'block'; // } // ------------------------------------- function Tab() { this.box = document.getElementById('box'); this.span = this.box.querySelectorAll('span'); this.div = this.box.querySelectorAll('div'); } Tab.prototype.init = function () { var that = this; // 对象存给了that for (var i = 0; i < this.span.length; i++) { this.span[i].index = i; // 自定义下标 this.span[i].onclick = function () { // this--span that.change(this); } } } Tab.prototype.change = function (ele) { // 1、所有的span去掉样式，所有的div隐藏 for (var i = 0; i < this.span.length; i++) { this.span[i].className = ''; this.div[i].style.display = 'none'; } // 2、当前的span加上样式，对应的div显示 ele.className = 'active'; this.div[ele.index].style.display = 'block'; } window.onload = function () { var t1 = new Tab(); t1.init(); } </script> </head> <body> <div id="box"> <span class="active">html</span> <span>css</span> <span>js</span> <div style="display: block;">html</div> <div>css</div> <div>js</div> </div> </body>
