2017-08-14

面向对象编程
用对象的思想去写代码，就是面向对象编程
-面向过程
-面向对象
面向对象编程的特点
1.抽象 抽取一样的东西，抓住核心问题
2.封装 只能通过对象访问
3.继承 从已有对象上继承出新的对象

4. 多态 多对象的不同形态

对象的属性：对象下面的变量
对象的方法：对象下面的函数

var obj = {};
obj.name = "Tom";
obj.sayName = function(){
  alert(this.name);      //注意：this所属于这个函数，谁调用这个函数，this就指向谁。现在obj调用 ，那么this就指向obj，如果下面直接调用像这样sayName()那么this就指向window
}

obj.sayName(); //Tom

工厂方式：封装函数
当new去调用一个函数时，这个this就是创建出来的对象，而且函数的返回值直接就是this啦（隐式返回）

new后面的函数叫做构造函数

基本类型：赋值的时候只是值的复制
对象类型：赋值不仅是值的复制，而且也是引用的传递

比较
基本类型：值相同就可以
对象类型：值相同且 引用也相同

---

原型：去改写对象下面的公共的方法或者属性，让公共的方法或者属性在内存中存在一份（提高性能）
原型和普通方法的区别
原型：类比css中 的class
普通方法：类比css中的style
1)style的优先级高于class 2)style不能复用

原型要写在构造函数下

面向对象的拖拽

---

2高级
JS源码：系统对象是基于原型的程序
尽量不去修改和添加系统对象的方法和属性
arguments是实参的集合

包装对象：基本类型有自己的包装对象（String，Boolean，Number。null和undefined没有自己的包装对象）

var str = "hello";
typeof(str) //String
str.charAt(0)
过程：基本类型会找到对应的包装对象类型，然后把包装对象的所有属性和方法给 了基本类型，然后包装对象消失

var str = "number";
str.number = 10;// 给String包装对象上加了属性number
alert(str.number) //undefined  包装对象消失这里的str的原型String上面没有属性number

原型链
实例与原型之间的连接叫做原型链，__ proto__
原型链的最外层是Object
hasOwnPrototype() 看是不是自身下面的属性
constructor 查看对象的构造函数

function Aa(){
}
var a1 = new Aa();
(每个函数都会有的都是)系统会自动生成 Aa.prototype.constructor = Aa;
constructor是 Aa的prototype下面的属性
hasOwnProperty是Object下面的属性
//a1.hasOwnPrototype == Object.prototype.hasOwnPrototyppe 返回true

for in的时候有些属性是找不到的
避免修改constructor属性

instanceof运算符：对象与构造函数在原型链上是否有关系

toString()把对象转换成字符串，可以穿参数 进制数
toString()可进行类型判断

1）系统对象的toString方法在系统对象的prototype下面，
自己创建的对象在Object.prototype下面
2）Object.prototype.toString.call()
判断类型最靠谱

var arr = [1,2];
alert(Object.prototype.toString.call(arr)) //返回'[object Array]'
所以利用Object.prototype.toString.call(arr) == '[object Array]可以判断是不是数组
其他两种方法
arr instanceof Array
arr.constructor == Array但是这两种方法在iframe的时候有问题
栗子：
        var fr = document.createElement("iframe");
        document.body.appendChild(fr);
        var ifArray = window.frames[0].Array;
        var arr = new ifArray();
        console.log(arr instanceof Array)    //false
        console.log(arr.constructor == Array)  //false
        console.log(Object.prototype.toString.call(arr) == '[object Array]')   //true

对象的继承
什么是继承：
在原有的基础上，略修改，得到一个新的对象
不影响原有对象的功能
如何添加继承
属性：call（用call的方式调用父类的函数）
****方法：for in （拷贝继承jquery也是采用拷贝继承参考extend）****

继承的好处：子类不影响父类。子类可以继承父类的一些功能（代码复用）

1拷贝继承 比较通用 有new无new都可以
2.类式继承 适合有new 的构造函数
JS是没有类的概念，可以吧JS中的构造函数看做类
Bb.prototype = new Aa()
注意：constructor和继承时属性不相互影响
F.prototype = Aa.prototype;
Bb.prototype = new F();
Bb.prototype.constructor = Bb;
3）原型继承 适合无new 的对象
借助原型来实现继承

var a = {
            name : "Tom"
        };
        var b = cloneObj(a);
        function cloneObj (obj) {
            var F = function(){}
            F.prototype = obj;
            return new F();
        }

组件开发
参数个数和顺序的问题

    function exdtend(obj1,obj2){
        for(var attr in obj2){
            obj1[attr] = obj2[attr];
        }
    }

var a = {
    name : "xx" //配置参数
}
var b = {
    name:"mm" //默认参数 key值一定要相同 配置参数才能覆盖默认参数
};
extend(b,a)
alert(b.name)

面向对象的设计模式：单体模式
组件：对面向对象的深入应用
UI组件，功能组件
将配置参数，方法，事件（自定义）三者相分离
自定义事件：主要是和函数有关，让函数能够具备事件的某些特性，需要主动触发

有利于多人协作