JavaScript关于面向对象的那些事儿

在JavaScript里面的面向对象有几个独有的地方，比如它的一切事物都是对象，它所构造对象的方式等；也有与所有面向对象的语言相通的地方，比如对象的继承，封装性，信息隐藏等。别看JavaScript名字和Java比较像，它所实现继承和多态的方法，还有它构造对象的方法，与java有着天壤之别。接下来我们就来学习JS面向对象的那些事儿。

一）首先我们来看一下JS定义对象的方法，广义上可以分为两种，第一种是普通的定义和创建对象实例，第二种是通过函数构造器来构造对象。第一种方法，我们通过代码来看，一目了然，十分简单。

var person=new Object();
person.name="tom";
person.age="22";
person.tel="12345869";

或者另外一种更为简洁的写法，语法如下，属性之间用逗号隔开：

var person={
    name:"刘家威",
    age:"22",
    tel:"123456789",
}
alert(person.name+person.age+person.tel);

然后我们来看一下通过使用函数来定义对象，然后创建对象实例的方法是什么样子的

function people(name,age,tel){
    this.name=name;
    this.age=age;
    this.tel=tel;
}

var someOne=new people("Tom",30,12345678);
document.write(someOne.name+someOne.age+someOne.tel);

或者它的属性（成员变量，成员方法）可以这样写

function people(){

}
people.prototype={
    name:"刘家",
    age:"22",
    tel:"12345678"
}
var me=new people();
document.write(me.name);

这就是基本的构建对象的方法，虽然很独特，但是也很简单，比较好理解。

二）在JavaScript里如何实现继承呢？

我们知道在java里可以通过关键字extends和implements来继承父类和实现接口，从而实现多态，但是在JavaScript里面是没有的，那么我们怎么实现继承呢？下面我们就一步步来学习

首先我们先写一个父类people,同时给它写一个成员方法say()

 function people(name){
        this.myName=name;
    }
    people.prototype.say=function(){
        alert("people"+this.myName);
    }

然后我们写一个子类student,想要让它继承父类，只需要让它的prototype属性全部来自父类即可

function student(name){
        this.myName=name;
    }
    student.prototype=new people();//继承

我们可以重写父类的say()方法

 student.prototype.say=function(){
        alert("student"+this.myName);
    }

最后生成student的对象

var me=new student("刘家威");
me.say();

如果我们想引用父类的方法怎么做呢？答案是使用call()方法来回调

 var superPeople=student.prototype.say;
    superPeople.call(this);

我们将代码全部放在一起便于观察

  function people(name){
        this.myName=name;
    }
    people.prototype.say=function(){
        alert("people"+this.myName);
    }


function student(name){
        this.myName=name;
    }
    student.prototype=new people();//继承
    var superPeople=student.prototype.say;
    superPeople.call(this);//引用父类方法
    student.prototype.say=function(){
        alert("student"+this.myName);//重写
    }


var me=new student("刘家威");
me.say();

三）如何在JS中实现封装呢？在JS中想要将某个代码块或者功能块封装起来，方法很独特，使用如下的语法，要注意最后的分号不能少，最后的小括号代表执行该代码块，也不能漏掉

如果想让外界能够访问这个封装体，即让它有一个和外界联系的接口，将其赋给window对象即可

(function(){
    ......
    //代码块
}());

比如我们对上面的people类进行封装

(function(){
        function people(name){
            this.myName=name;
        }
    people.prototype.say=function(){
        alert("people"+this.myName);
    }
    window.people=people;//让外界能够访问
    }());

这样的话，我们在此封装体里面定义的变量，只有该封装体可以使用。

四）在JS里面除了这种实现继承的方法，还可以通过将对象直接赋值给子类的方法来达到继承的目的，因为JS里一切都是对象，那么对象的属性和方法都会被视作对象随之赋值给子类了。

我们通过代码来看看，say()方法给了一个空对象myThis，可以视之为暂存器，最后返回给父类。在子类里面将父类赋值给一个变量，返回给子类，那么整个父类实质上就赋给子类了。

function people(){
    var myThis={};
    myThis.say=function(){
        alert("people hello");
    };
    return myThis;
}

function student(){
    var my=people();//将people类赋值，实现继承的效果
    return my;
}

var me=new student();
me.say();

如果我们想调用父类方法，或者重写父类方法，还有封装的实现，就和之前（三）的方法一样了

function student(){
    var my=people();//将people类赋值，实现继承的效果
    var superPeople=my.say;
    superPeople.call(this);//调用父类方法
    my.say=function(){
        //......重写
    }
    return my;
}

通过以上的学习，对JavaScript的面向对象的用法是不是弄清楚了呢，JS里还提供了许多内置对象，浏览器对象，来方便我们操作HTML和CSS，其本质也是一种普通的对象，只不过其许多属性和方法是已经做好的罢了，我们只需要去享用。而需要自定义对象的部分，大致通过以上的方法就可以实现。

JavaScript关于面向对象的那些事儿

猜你喜欢