面向对象的那些事儿"/>
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关于面向对象的那些事儿
发布评论