JS面向对象

面向对象相关概念

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

对象

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

某个特定引用类型的实例

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

创建对象

基于Object的方式创建对象

var 对象名称=new Object( );

var user = new Object();

    user.name = "张三";

    user.pwd = "123456";

    user.show=function(){document.write(this.name+"-"+this.pwd);}

    user.show();

对象字面量

对象定义的一种简写形式

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

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

var user = {

        name : "张三",

        pwd : "123456",

        show:function(){

            document.write(this.name+"-"+this.pwd+"<br/>");

        }

    }

    user.show();

练习1：创建person对象

基本Object对象的方式创建person对象

使用“.”为对象person添加属性name、age、job和address

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

   var person = new Object ();

        person.name = "zhangsan";

        person.age = 18;

        person.job = "gongwuyuan";

        person.address = "gugong"

        person.intro = function () {

            console.log("我的名字叫:" + this.name + " " + "我的年龄:" + this.age + "岁" + " " + "我的工作是:" + this.job + " " + "我住在:" + this.address);

        }

        person.intro()

工厂模式

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

抽象了创建对象的过程

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

function createUser(name,pwd){

        var user = new Object();

        user.name = name;

        user.pwd = pwd;

        user.show=function(){

            document.write(this.name+"-"+this.pwd+"<br/>");

        }

 //需要把最终的对象 return出去

        return user;

    }

//这里多次调用函数,那么函数内部就会多次去new一个实例化对象,

也就是会在内存中开辟多个内存,调用次数越多就月浪费空间

    var user1 = createUser("张三","123456");

    var user2 = createUser("李四","654321");

    user1.show();

    user2.show();

工厂模式创建对象有何弊端

看不出类型--解决：构造函数

函数重复、浪费资源--解决：原型

构造函数 (解决看不出类型的问题)

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

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

与工厂模式对比 没有显式创建对象

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

没有return

function User(name,pwd){

        this.name = name;

        this.pwd = pwd;

        this.show=function(){

            document.write(this.name+"-"+this.pwd+"<br/>");

        }

    }

    var user1 = new User("张三","123456");

    var user2 = new User("李四","654321");

    user1.show();

    user2.show();

原型  prototype(解决重复定义,浪费资源的问题)

每个函数都有一个prototype（原型）属性

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

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

function User(name,pwd){

        this.name = name;

        this.pwd = pwd;

    }

User. prototype.show=function(){

        document.write(this.name+"-"+this.pwd+"<br/>");

};

var user1 = new User("张三","123456");

var user2 = new User("李四","654321");

user1.show();

user2.show();

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

构造函数+prototype

构造函数负责设置属性

原型prototype添加方法

练习1：原型方法去空格

使用原型方法以及正则表达式清除字符串空格，分别清除如下空格：

清除前面空格

清除后面空格

清除前后空格

清除所有空格

String . prototype . trim = function ()

        {

            reg = / ^ \s + /

            return  this . replace ( reg , '' );   //去前面空格

        }

        String . prototype . trim1 = function ()

        {

            reg = /\s + $ /

            return  this . replace ( reg , '' );   //去后面空格

        }

        String . prototype . trim2 = function ()

        {

            reg = / ^ \s + | \s + $ / g

            return  this . replace ( reg , '' );   //去前后空格

        }

        String . prototype . trim3 = function ()

        {

            reg = /\s + / g

            return  this . replace ( reg , '' );   //清除所有空格

        }

        var  str = ' kgc sss ' ;

        console . log ( str . trim ());

        console . log ( str . trim1 ());

        console . log ( str . trim2 ());

        console . log ( str . trim3 ());

    console . log ( str . trim ()) //去两边空格

练习2：原型方法排重

请将如下数组使用原型方法排重

var arr=[5,4,26,9,4,8,5,14]；

Array . prototype . unique = function ()

        {

            var  temp =[];

            for ( var  i = 0 ; i < this . length ; i ++)

            {

                if ( temp . indexOf ( this [ i ])==- 1 )

                {

                    temp . push ( this [ i ]);

                }

            }                                

            return   temp

        }

        var  arr =[ 5 , 4 , 26 , 9 , 4 , 8 , 5 , 14 ]

        console . log ( arr . unique ());

冒泡排序