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方法返回的是一个函数



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。