JavaScript-JS面向对象初级&面向对象高级

一、面向对象相关


面向对象相关概念

JS是一种基于对象的语言,和其它面向对象语言不同

对象

(是一组无序的相关属性和方法的集合 所有的事务都是对象例如:字符串、数值、数组、函数等)

对象是由属性和方法组成

引用类型是一种数据结构,将数据和功能组织在一起,常被称

为类

某个特定引用类型的实例

引用类型&对象--模具&实例



 创建对象方式:

1、 通过new实例化出一个object对象

2、字面量

3、工厂模式

4、构造函数


函数 Person()就是对象构造器函数。

通过new关键词调用构造器函数可以创建相同类型的对象

在 JavaScript 中,被称为 this 的事物是代码的“拥有者”。

this 的值,在对象中使用时,就是对象本身。


1、基于Object的方式创建对象

在 JavaScript 中,被称为 this 的事物是代码的“拥有者”。

this 的值,在对象中使用时,就是对象本身。


 // 从object类中 通过new实例化出一个object对象

        var obj = new Object()

        // 给对象设置属性和方法

        obj.head=1

        obj.foot=2

        obj.eat=function(){

            // 因为是obj的eat方法 所以下面的this 指向obj 所以可以直接调用出obj中的head和foot的值

            console.log("我有"+this.head+"一个小秘密","只有你和我"+this.foot+"个人知道")

        }  obj.eat()

示例图:



2、  对象字面量方式

对象定义的一种简写形式

简化创建包含大量属性的对象的过程

在为函数传递大量可选参数时,可考虑使用对象字面量

格式:

 var obj = {

            head: 1,

            foot: 2,

            eat: function () {

                console.log("我有" + this.head + "一个小秘密", "只有你和我" + this.foot + "个人知道")

            }

        }obj.eat()


练习:创建person对象

基本Object对象的方式创建person对象  使用“.”为对象person添加属性name、age、job和address

添加方法intro( ),在页面上显示对象属性name、age、job和address的值



3、工厂模式


软件工程领域的一种设计模式

抽象了创建对象的过程

通过函数封装创建对象的细节

利用函数 通过传参形式 创建不同的对象 输出不同的信息


缺陷:

1、看不出类型

在工厂函数中没有没有实现XX方法 但是由于只是调用了函数 看不到函数内部的代码到底new什么类型 导致多除了XX方法 给程序造成了不确定性

2.函数重复浪费资源

多次调用函数 函数内部会多次new 一个实例化对象 会在内存中开辟多个内存空间 调用次数越多越浪费内存空间

解决方式:

看不出类型-构造函数

浪费资源-原型


示例图:



4、构造函数


构造函数一般以大写字母开头

构造函数也是函数,只不过可以用来创建对象

工厂模式看不出类型--解决:构造函数


与工厂模式对比

没有显式创建对象

直接将属性和方法赋给了this对象

没有return

示例图:


原型prototype

每个函数都有一个prototype(原型)属性

是一个指针,指向一个对象

这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法

为了解决函数重复定义、浪费资源的问题:利用原型解决


示例图:


总结:

推荐使用用混合方式构造对象

构造函数+prototype

构造函数里面设置属性

原型prototype中添加方法

切记:☆在原型上写新的方法 方法名不要和原来就有的方法重合名字 不然会发生覆盖


小练习:

使用原型方法以及正则表达式清除字符串空格,分别清除前、后、前后空格,最后清除所有空格


去除字符串空格方法trim

谷歌浏览器支持trim IE浏览器只支持trim方法 取余的trim-End之类的均不支持 

想都支持 请自己在string 构造函数的原型中添加


二、JS面向对象高级- 继承方式


1、利用原型链继承-new一个父类实例

修改子类原型不影响父类原型

示例图:

注意

如果替换了prototype对象:o.prototype = {};

要为新的prototype对象加上constructor属性,并将这个属性


2、利用原型链直接继承prototype

优点:效率比较高(不用执行和建立Person的实例了)

缺点:子类和父类现在指向了同一个对象,对子类原型的修改同时会影响父类原型

示例图:


3、利用空对象作为中介


优点:

1、空对象,几乎不占内存

2、修改Student的prototype对象,不会影响到Person的prototype

3、不会影响父类

示例图:



六、封装

1、空对象封装-利用传参方式封装

2、如果有多个子类想要继承父类 示例图:



七、构造函数绑定

call方法

apply方法

定义:调用一个对象的一个方法,以另一个对象替换当前对象


1、call方法

call的参数是一个一个传递的

格式:

var a ={

            name:"张三",

            fn:function(str,str1){

                document.write(this.name+str+str1+'<br>')

            }        

        }

        var b = {

            name:"李四"

        }

 a.fn.call(b,"爱生活","爱冬天")


call是函数中的方法 所以必须要函数来调用

第一个参数是需要改变this指向的对象 

第二个参数是传递给方法的实际内容



2、apply方法

apply是通过数组传参

格式:

 var a ={

            name:"张三",

            fn:function(str,str1){

                document.write(this.name+str+str1+'<br>')

            }        

        }

        var b = {

            name:"李四"

        }

 a.fn.apply(b,["爱美食","爱睡觉"])


call和apply区别

相同点:都是改变this指向

不同点:传参  call是一个一个传递 apply需要使用数组来传参



3、bind方法

bind方法的第一个参数也是需要改变this指向的对象


格式:

var a ={

            name:"张三",

            fn:function(str,str1){

                document.write(this.name+str+str1+'<br>')

            }        

        }

        var b = {

            name:"李四"

        }

         bind传参第一种方式:


        // 最后的括号意为调用函数

        a.fn.bind(b,"爱休假","爱旅游")()


          bind传参第二种方式:

        a.fn.bind(b)("爱休假","爱旅游")



call、apply、bind方法和区别:

bind方法返回的是一个函数



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