2017-08-14

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

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

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

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组件,功能组件
将配置参数,方法,事件(自定义)三者相分离
自定义事件:主要是和函数有关,让函数能够具备事件的某些特性,需要主动触发

有利于多人协作

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,752评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,100评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,244评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,099评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,210评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,307评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,346评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,133评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,546评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,849评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,019评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,702评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,331评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,030评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,260评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,871评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,898评论 2 351

推荐阅读更多精彩内容