javascript基础学习一--面向对象
面向过程就是亲力亲为，事无巨细，步步紧跟，不能跳过（做饭过程）
面向对象：找一个对象，指挥得结果。（叫外卖，不关注怎么做饭，求结果）
函数也是对象，指函数封装性。（用来不告诉你核心怎么实现，但可以给你用）
面向对象实质上是对面向过程的封装，但不是对面向过程的替代
在jq中
$(‘ #dv’) //找id=dv的对象 $( ‘ <div></div>’).appendTo(body)//封装div对象到body中 $(body).append(‘<div></div>’)跟2相同
什么叫面向对象开发？使用对象开发
js面向对象特性（*）抽象、封装、继承
js中的对象：键值对的集合
描述人物：name，age，gender {name: ‘zs’, age:18, gender : 1}
抽象：
如果需要用一个对象描述一个数据，需要抽取这个对象的核心数据，
不在特定条件下不知道是什么
封装：
对象是将数据与功能组合到一起，即封装
js对象就是键值对的集合
键值如果是数据（基本数据，复合数据，空数据）
如果键值是函数，那么就称为方法
对象就是将属性与方法封装起来
方法是将过程封装起来
继承：
简单理解就是自己没有，继承别人的拿过来。是实现复用的手段，即把别人的拿过来用。
了解：在面向对象语言中（如：java、c++）类是模版，规定了一个对象应该有什么属性方法，js则使用构造函数定义属性方法
另一个模版的成员，那么由该模版创建出来的对象就同时拥有两个模版对象
js没有明确的继承语法，一般都是按照继承的理念实现对象成员扩充实现继承
最简单的方法叫混入（mix）如下：
function mix(o1,o2) { //在jq中将此函数命名为extend for (var k in o2) { o1[k] = o2 [k]; } } var o1 = { name :"zhangdan"} var o2 = { age : 19}; mix (o1, o2); //就是将o2 的成员一一加到o1中，使得o1具有两个对象的属性 //1、首先找对象 //2、任何操作应该交给对象完成 //面向过程代码 //任务需求： //1、创建一个div标签 var div = document.createElement('div'); //2、将div加到页面中 document.body.appendChild(div); //3、设置div的样式 div.style.border = '1px solid red'; //面向对象的方式去思考： //1、抽取对象（名词提炼法）：div，body //2、分析属性与方法（动词提炼）：加到，设置样式 function DivTag() { this.DOM = document.createElement('div'); this.appendTo = function (node) { node.appendChild( this.DOM); }; this.css = function(option) { for (var k in option) { this.DOM.style[k] = option[k]; } } } var divTag = new DivTag(); divTag.appendTo(document.body); divTag.css({ 'border': '10px solid red', 'width': '400px', 'height': '100px', 'background-color': 'blue' }); 中级面向对象 //面向对象的方式去思考： //1、抽取对象（名词提炼法）：div，body //2、分析属性与方法（动词提炼）：加到，设置样式 function DivTag() { this.DOM = document.createElement('div'); this.appendTo = function (node) { node.appendChild( this.DOM); return this;//如果没有会返回undefined 不能如下使用 }; this.css = function(option) { for (var k in option) { this.DOM.style[k] = option[k]; } return this;;//如果没有会返回undefined 不能如下使用 } } new DivTag().appendTo(document.body).css({ 'border': '10px solid red', 'width': '400px', 'height': '100px', 'background-color': 'pink' }); new DivTag().appendTo(document.body).css({ 'border': '13px solid green', 'width': '300px', 'height': '200px', 'background-color': 'pink' }); //思考：
//1、输入的时候写的是函数的定义，为什么输出是undefined //在js中函数是一等公民，是一个非常普通的对象 //声明一个函数没有值 //条件断点：当浏览器认为你的条件为真时，起作用
为什么要学面向对象
面向对象是一种思考问题的方式，帮我们封装内容方便未来调用。
对象可以屏蔽一些东西，提取对象特定的行为属性；
// 面向对象example var hero = new Object(); // 属性-特征 名词 hero.name = "xm"; hero.level = 0; hero.diamond = 0; console.log(hero.name); // 方法--行为 动词 hero.moveLeft = function () { console.log("left"); }; hero.attack = function (name) { // 只有在当前hero对象的方法中，this才是当前hero对象 console.log(this.name + "attack" + name); }; // 调用对象的方法 hero.attack("xjj"); // new Object()； // 1、内存中开辟空间，存储创建的对象,这个对象没有属性和方法（除开系统内置） // 2、返回刚刚创建的对象 // 3、Object构造函数第一个字母要大写 // 函数跟方法的区别 // 函数：直接调用的是函数； 方法：通过对象调用的函数是对象的方法 // 自定义构造函数-构造一个对象，并且返回的函数，注意首字母大写 function Person(name, age, sex) { // 不需再new Object } // 1、开辟内存空间，存储新创建的对象new Object（） //谁调用的this？？？重点 // 2、会把this 作为当前的对象 // 3、执行函数内部的代码，设置对象的属性和方法 // 4、返回新创建的对象 var a = new Object(); //对象：无序对象的集合，我们可以把对象当作键值对来用 //动态给对象增加属性 for (var i =0 ; i<10;i++) { a["n" + i] = i; }
Review:
1、什么是对象？
A、一组无序属性的集合
B、对象可看成键值对
C、属性可以包含基本值、对象和函数
2、对象的组成
A、属性 == 特征 名词
B、方法--行为 动词
C、将来还有事件
3、函数和方法的区别
A、函数：直接调用的是函数 example：alert（）
B、方法：通过对象调用的是方法 hero.Attack（）；
4、构造函数
A、构造函数的目的是用来创建对象
B、使用new Object（）创建对象
C、封装函数创建多个对象
D、自定义构造函数
1、内存开辟空间，存储新创建的对象new Object（）
2、会把this设置为当前对象
3、执行函数内部的代码，设置对象的属性和方法
4、返回新创建的对象
5、This
A、函数中this是当前调用函数的对象
B、构造函数中this是指当前构造函数创建的对象
Conclusion：谁调用this指向谁
