JS面向对象1

摘要：什么是面向对象编程用对象的思想去写代码，就是面向对象编程过程式写法面向对象写法我们一直都在使用对象数组时间面向对象编程的特点抽象抓住核心问题封装只能通过对象来访问方法继承从已有对象上继承出新的对象多态多对象的不同形态对象的组成方法行为操作对

用对象的思想去写代码，就是面向对象编程

过程式写法

面向对象写法

我们一直都在使用对象

数组Array 时间Date

抽象：抓住核心问题

封装：只能通过对象来访问方法

继承：从已有对象上继承出新的对象

多态：多对象的不同形态

方法（行为、操作） —— 对象下面的函数：过程、动态的

属性 —— 对象下面的变量：状态、静态的

//var obj = {};
var obj = new Object(); //创建了一个空的对象
obj.name = "小明"; //属性
obj.showName = function(){ //方法
    alert(this.name);
}
obj.showName();

为对象添加属性和方法

Object对象

this指向

创建两个对象：重复代码过多

//var obj = {};
var obj = new Object(); //创建了一个空的对象
obj.name = "小明"; //属性
obj.showName = function(){ //方法
    alert(this.name);
}
obj.showName();
var obj2 = new Object(); 
obj2.name = "小强";
obj.showName = function(){
    alert(this.name);
}
obj2.showName();

面向对象中的封装函数

//工厂方式：封装函数
function createPerson(name){
    //1. 原料
    var obj = new Object();  
    //2. 加工
    obj.name = name;
    obj.showName = function(){
        alert(this.name);
    };   
    //3. 出厂
    return obj;
}
var p1 = createPerson("小明");
p1.showName();
var p2 = createPerson("小强");
p2.showName();

改成与系统对象类似的写法
1、首字母大写
2、New关键字提取
3、this指向为新创建的对象

/* 当new去调用一个函数：这个时候函数中的this就是创建出来的对象，而且函数的返回值直接就是this啦。（这叫做隐式返回） */
// new后面调用的函数：构造函数
function CreatePerson(name){
    this.name = name;
    this.showName = function(){
        alert(this.name);
    };
    // return obj; 隐式返回，所以这一行不用写了
}

var p1 = new CreatePerson("小明");
p1.showName();
var p2 = new CreatePerson("小强");
p2.showName();

构造函数
用来创建对象的函数，叫做构造函数
存在的问题
1、对象的引用
2.浪费内存

/* 当new去调用一个函数：这个时候函数中的this就是创建出来的对象，而且函数的返回值直接就是this啦。（这叫做隐式返回） */

// new后面调用的函数：构造函数
function CreatePerson(name){
    this.name = name;
    this.showName = function(){
        alert(this.name);
    };
    // return obj; 隐式返回，所以这一行不用写了
}
var p1 = new CreatePerson("小明");
p1.showName();
var p2 = new CreatePerson("小强");
p2.showName();

//alert(p1.showName == p2.showName); //false

/*
    var a = [1, 2, 3];
    var b = [1, 2, 3];

    alert(a == b); //false;
*/

/*
    var a = 5;
    var b = a;
    b += a;
    alert(b); //8
    alert(a); //5 基本类型：赋值的时候只是值的复制
*/

/*
    var a = [1, 2, 3]; 
    var b = a; 
    b.push(4);
    alert(b); //[1, 2, 3, 4]
    alert(a); //[1, 2, 3, 4] 对象类型：赋值不仅是值的复制，而且也是引用的传递
*/

/*
    var a = [1, 2, 3];
    var b = a;
    b = [1, 2, 3, 4];
    alert(b); //[1, 2, 3, 4]
    alert(a); //[1, 2, 3] 只要赋值就会在内存中重新生成，所以a，b互补影响
*/

/*
    var a = 5;
    var b = 5;
    alert(a == b); //true 基本类型的比较：只要值相同就可以
*/

/*
    var a = [1, 2, 3];
    var b = [1, 2, 3];
    alert(a == b); //false 对象类型：值和引用都相同才行
*/

/*
    var a = [1, 2, 3];
    var b = a;
    alert(a == b); //true
*/

概念
去改写对象下面公用的方法或者属性，让公用的方法或者属性在内存中仅存在一份（好处：提高性能）

学习原型

类比：原型就是CSS中的class（普通方法就是CSS中的style）

普通方法的优先级比原型要高

原型可以复用，普通方法不可以复用

var arr = []; 
arr.number = 10;
Array.prototype.number = 20;
alert(arr.number); //10 普通方法的优先级高于原型

//原型：prototype：要写在构造函数下面
var arr = [1, 2, 3, 4, 5];
var arr2 = [2, 2, 2, 2, 2];
Array.prototype.sum = function(){
    var result = 0;
    for(var i=0; i
通过原型改写工厂方式原则：

相同的属性和方法可以加在原型上

混合的编程模式


function CreatePerson(name){
    this.name = name; //变化的，不能公用的属性不能写在原型上
}
CreatePerson.prototype.showName = function(){
    alert(this.name);
}   

var p1 = new CreatePerson("小明");
var p2 = new CreatePerson("小强");

alert(p1.showName == p2.showName); //true
混合的编程模式
//面向对象的写法
function 构造函数(){
    this.属性
}
构造函数.原型.方法 = function(){};

//面向对象的使用
var 对象1 = new 构造函数();
对象1.方法();
总结面向对象写法:构造函数加属性，原型加方法
面向对象的选项卡
原则
先写出普通的写法，然后改成面向对象写法


普通方法变型

尽量不要出现函数嵌套函数

可以有全局变量

把onload中不是赋值的语句放到多带带的函数中




改成面向对象

全局变量就是属性

函数就是方法

onload中创建对象

改this指向问题，要尽量让面向对象中的this指向对象




1、先写出普通方法



    
    
    
    


    

        
        
        
        
11111
        
22222
        
33333
    


2、普通方法变型



    
    
    
    


    

        
        
        
        
11111
        
22222
        
33333
    


关于this的指向
oDiv.onclick = function(){
    this: oDiv
};

---

oDiv.onclick = show;
function show(){
    this: oDiv
}

---

oDiv.onclick = function(){
    show();
};
function show(){
    this: window
}
改写成面向对象



    
    
    
    


    

        
        
        
        
11111
        
22222
        
33333
    


面向对象的复用



    
    
    
    


    

        
        
        
        
11111
        
22222
        
33333
    

    

        
        
        
        
11111
        
22222
        
33333
    


面向对象的拖拽
注意

Event对象（event对象一定要写到事件函数里面）

事件函数中用来阻止默认行为的return false也要写到事件函数里面


!DOCTYPE html>


    
    
    
    


    



本课练习

为数组对象添加求和，最大值

为字符串对象添加判断是不是最后一个字母

面向对象的选项卡

给选项卡添加一个自动播放的方法

任意学过的效果改写成面向对象

面向对象的面试题


高级面向对象
包装对象
JS基于原型的程序
String Number Boolean



    
    
    
    




给基本类型添加方法



    
    
    
    




原型链

实例对象与原型之间的连接，叫做原型链

proto (隐式连接)

Object对象类型是原型链的最外层





    
    
    
    




面向对象的一些属性和方法
hasOwnProperty()看是不是对象自身下面的属性



    
    
    
    




constructor查看对象的构造函数

每个原型都会自动添加constructor属性

for in 的时候，有些属性是找不到的

避免修改constructor属性





    
    
    
    




for in循环，有些属性找不到



    
    
    
    




instanceof运算符
对象与构造函数在原型链上是否有关系
可以用来作类型判断



    
    
    
    




toString()
object上的方法



    
    
    
    




对象的继承
什么是继承

在原有对象的基础上，略作修改，得到一个新的对象

不影响原有对象的功能


如何添加继承

属性：call

方法：for in

例子：继承的拖拽


!DOCTYPE html>


    
    
    
    







    
    
    
    







    
    
    
    




继承的拖拽



    
    
    
    
    


    

    



继承的其他形式
1、类式继承
利用构造函数（类）继承的方式
2、原型继承
借助原型来实现对象继承对象
类式继承



    
    
    
    




原型继承



    
    
    
    





拷贝继承：通用型的 有new或无new的时候都可以

类式继承：适合通过new构造函数形式

原型继承：比较适合无new的对象


组件开发
1、对象的多种表现形式

提高对象的复用性

如何配置参数和默认参数

例子：拖拽

例子：弹窗


2、什么是组件？

对面向对象的深入应用（UI组件、功能组件）

将配置参数、方法、事件、三者进行分离


3、创建自定义事件

有利于多人协作开发代码

如何去挂载自定义事件与事件函数


4、例子：基于JQ的选项卡的组件开发模式
trigger() extend()等方法的使用
5、本课练习
组件开发的练习
http://tangram.baidu.com/magic/
如何配置参数和默认参数



    
    
    


    


拖拽的组件开发



    
    
    
    
    


    
 
    
 
    
 
    
 


弹窗的组件开发



    
    
    
    


    
    
    

    
    


理解自定义事件



    
    
    


    


用原生js实现自定义事件



    
    
    


    
div
    span

配置、方法、自定义事件分离
——正规组件的写法——基于拖拽的组件进行的修改



    
    
    
    
    


    
 
    
 
    
 
    
 


用JQ实现选项卡的组件开发



    
    
    
    
    


    

        
        
        
        
111111
        
222222
        
333333
    
    

        
        
        
        
111111
        
222222
        
333333
    
    

        
        
        
        
111111
        
222222
        
333333
    
    

        
        
        
        
111111
        
222222
        
333333