JavaScript是一个动态的通用面向对象编程语言,所有的现代Web浏览器均包含了JavaScript解释器,这使得JavaScript能够称得上史上使用最广泛的编程语言。
特别是自2009年后,随着Node.js 、ES5的诞生,使得JavaScript的功能能够负责“全栈”。Node.js是一个服务器端框架,基于Google的V8 JavaScript引擎创建。用Node.js去实现一层完全配置化的适配HTTP各种协议,具有缓存策略的接口路由,再通过配置或少量代码实现接口调用聚合即可完成功能,这些工作前端工程师就能干了,使用javascript来提高团队整体工作效率,完全不需要后端参与。况且在各种评测中,看到JavaScript虚拟机比Java虚拟机快个一两倍,甚至几倍已经不是什么新鲜事了。
1996年11月,网景公司将JavaScript提交给欧洲计算机制造商协会进行标准化。ECMAScript是由ECMA-262标准化的脚本语言的名称。到现在已经有近20个年头了,从ECMAScript 1版发展到了现在的ECMAScript 6(ES6),经历了5个版本的更迭(ES4被叫停);近年来,基于JavaScript各种架构横空出世,在后端和移动端都有出色的表现。仿佛这个古老的语言一夜之间咸鱼翻身。遥想当年,取名为JavaScript无非想蹭JAVA的光,谁曾想有今日的风光。
面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。它使用先前建立的范例,包括模块化,多态和封装几种技术。 Javascript并不是一种真正的面向对象编程(OOP)语言,ES6正在朝这方面努力。Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。下面,我们来看看如何将"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象。
一 . 封装
假设我们将“人”看成一个对象,他有名字、年龄两个属性。
var person={
name:'',
age:0
}
根据这个原型对象,我们需要来生成一个实例对象。
var person1={};
person1.name="jack";
person1.age=18;
以上就是最简单的封装了,但这样的写法有一下两个缺点:
一是如果多生成几个实例,这样写起来就非常累赘;
二是实例与原型之间,没有任何办法,可以看出有什么联系。
为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。
对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。
function person(name, age) {
this.name = name;
this.age = age;
}
//生成实例
var person1 = new person("jack", 18);
var person2 = new person("baby", 17);
console.log(person1.name);//jack
这样,person1、person2就同时拥有constructor 属性,指向它们的构造函数。
console.log(person1.constructor == person); //true
console.log(person2.constructor == person); //true
现在我们还需要为person类添加多个不变的属性:legs_num(几条腿),arms_num(几只手),以及一个方法:sayHi()。
function person(name, age) {
this.name = name;
this.age = age;
this.legs_num=2;
this.arms_num=2;
this.sayHi= function(){
console.log("Hi,My name's "+this.name+",I'm"+this.age+"years old now.");
};
}
如果这样直接加上去,有一个很大的弊端:那就是对于每一个实例对象,属性和方法都是一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存,显得缺乏效率。
Javascript提供了一个prototype属性,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。我们可以把那些不变的属性和方法,直接定义在prototype对象上。
function person(name, age) {
this.name = name;
this.age = age;
}
person.prototype.legs_num = 2;
person.prototype.arms_num = 2;
person.prototype.sayHi = function() {
console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
};
//生成实例
var person1 = new person("jack", 18);
var person2 = new person("baby", 17);
person1.sayHi();//Hi,My name's jack,I'm 18 years old now.
person2.sayHi();//Hi,My name's baby,I'm 17 years old now.
为了配合prototype属性,Javascript定义了一些辅助方法:isPrototypeOf()、hasOwnProperty()。
isPrototypeOf()方法用来判断,某个proptotype对象和某个实例之间的关系。alert(person.prototype.isPrototypeOf(person1)); //true
。
每个实例对象都有一个hasOwnProperty()方法,用来判断是否本地属性,false值就表示继承自prototype对象的属性。alert(person1.hasOwnProperty("name")); //true
二 . 继承
function person(name, age) {
this.name = name;
this.age = age;
}
person.prototype.legs_num = 2;
person.prototype.arms_num = 2;
person.prototype.sayHi = function() {
console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
};
function Student(name, age, className){
this.name = name;
this.age = age;
this.className=className;
};
现在,我们用一个学生(Student)的构造函数,如何让它继承自人(person)这个构造函数呢?
function person(name, age) {
this.name = name;
this.age = age;
}
person.prototype.legs_num = 2;
person.prototype.arms_num = 2;
person.prototype.sayHi = function() {
console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
};
function Student(name, age, className) {
person.apply(this, arguments);
this.className = className;
};
var Student1 = new Student('jack', 18, 'Class 3,Grade 2');
console.log(Student1.name); //jack
console.log(Student1.age); //18
console.log(Student1.className); //Class 3,Grade 2
Student1.sayHi(); //Student1.sayHi is not a function
使用apply、call简单继承一下,发现可以继承到person,而person.prototype.sayHi这显示没有这个函数,这个错误暂时不用理他。下面我们使用使用prototype属性进行继承。
function person(name, age) {
this.name = name;
this.age = age;
}
person.prototype.legs_num = 2;
person.prototype.arms_num = 2;
person.prototype.sayHi = function() {
console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
};
function Student(name, age, className) {
this.name=name;
this.age=age;
this.className=className;
};
Student.prototype = new person();
Student.prototype.constructor = Student;
var Student1 = new Student('jack', 18, 'Class 3,Grade 2');
console.log(Student1.name); //jack
console.log(Student1.age); //18
console.log(Student1.className); //Class 3,Grade 2
Student1.sayHi(); //Hi,My name's jack,I'm 18 years old now.
然后再修改一下代码,看看:
function person(name, age) {
this.name = name;
this.age = age;
}
person.prototype.legs_num = 2;
person.prototype.arms_num = 2;
person.prototype.sayHi = function() {
console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
};
function Student(name, age, className) {
this.name=name;
this.age=age;
this.className=className;
};
Student.prototype =person.prototype;
Student.prototype.constructor = Student;
var Student1 = new Student('jack', 18, 'Class 3,Grade 2');
console.log(Student1.name); //jack
console.log(Student1.age); //18
console.log(Student1.className); //Class 3,Grade 2
Student1.sayHi(); //Hi,My name's jack,I'm 18 years old now.
alert(person.prototype.constructor); // function Student(name, age, className)
有没有发现哪里不同了?Student.prototype = new person();
改为 Student.prototype =person.prototype;
这样做好像是少用了一个new节省了,但实际上把Animal.prototype对象的constructor属性也改掉了!在做继承的时候千万要注意,要保护好父级的代码不受影响。
alert(person.prototype.constructor);//function Student(name, age, className)
那么,我们将它改为:
Student.prototype = Object.create(person.prototype);
输出来是不是又好了呢?好了,现在回到上面继承第一个例子,我们可以来修补整段代码了
function person(name, age) {
this.name = name;
this.age = age;
}
person.prototype.legs_num = 2;
person.prototype.arms_num = 2;
person.prototype.sayHi = function() {
console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
};
function Student(name, age, className) {
person.apply(this, arguments);
this.className = className;
};
Student.prototype = Object.create(person.prototype);
Student.prototype.constructor = Student;
var Student1 = new Student('jack', 18, 'Class 3,Grade 2');
console.log(Student1.name); //jack
console.log(Student1.age); //18
console.log(Student1.className); //Class 3,Grade 2
Student1.sayHi(); //Student1.sayHi is not a function
alert(person.prototype.constructor); // function person(name, age)
不要被绕晕了,跟着代码做一遍就明白了。
最后用拷贝继承的方式来实现继承。这倒不是孔乙己所说的茴字到底有几种写法,有时候就需要考虑内存的资源分配、兼容性等等,实现同一目标有多种方式,可以找到最适合的一种。
function person(name, age) {
this.name = name;
this.age = age;
}
person.prototype.legs_num = 2;
person.prototype.arms_num = 2;
person.prototype.sayHi = function() {
console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
};
function Student(name, age, className) {
this.name = name;
this.age = age;
this.className = className;
};
function extend(Child, Parent) {
var p = Parent.prototype;
var c = Child.prototype;
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
}
extend(Student, person);
var Student1 = new Student('jack', 18, 'Class 3,Grade 2');
console.log(Student1.name); //jack
console.log(Student1.age); //18
console.log(Student1.className); //Class 3,Grade 2
Student1.sayHi(); //Hi,My name's jack,I'm 18 years old now.
alert(person.prototype.constructor); // function person(name, age)
这是纯粹采用"拷贝"方法实现继承:把父对象的所有属性和方法,拷贝进子对象,就能够实现继承。c.uber = p;
意思是为子对象设一个uber属性,这个属性直接指向父对象的prototype属性。这等于在子对象上打开一条通道,可以直接调用父对象的方法。
最后,我们来看看普通对象是如何进行继承操作的。
var area{
nation:'中国'
}
var person{
name:'jack'
}
现在我们想用person去继承area,但这两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现"继承"。json格式的创始人提出了一个object()函数,下面看看是如何做到这一点的。
var area={nation:'中国'};
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
var person = object(area);
person.career = 'jack';
console.log(person.nation);//中国
下面我再给添加一个"出生地"属性,它的值是一个数组。
area.birthPlaces = ['北京','上海','香港'];
var area = {
nation: '中国',
birthPlaces:['北京', '上海', '香港']
};
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
var person = object(area);
person.career = 'jack';
person.birthPlaces.push('广州');
console.log(person.nation); //中国
console.log(area.birthPlaces);//["北京", "上海", "香港", "广州"]
console.log(person.birthPlaces);//["北京", "上海", "香港", "广州"]
但是,这样的拷贝有一个问题。那就是,如果父对象的属性等于数组或另一个对象,因此存在父对象被篡改的可能。上面提醒过,继承要保护好父级的代码不受影响。
请看,现在给area添加一个"出生地"属性,它的值是一个数组。
下面使用深拷贝进行继承:
var area = {
nation: '中国',
birthPlaces: ['北京', '上海', '香港']
};
function deepCopy(p, c) {
var c = c || {};
for (var i in p) {
if (typeof p[i] === 'object') {
c[i] = (p[i].constructor === Array) ? [] : {};
deepCopy(p[i], c[i]);
} else {
c[i] = p[i];
}
}
return c;
}
var person = deepCopy(area);
person.career = 'jack';
person.birthPlaces.push('广州');
console.log(person.nation); //中国
console.log(area.birthPlaces); //["北京", "上海", "香港"]
console.log(person.birthPlaces); //["北京", "上海", "香港", "广州"]
把父对象的属性,全部拷贝给子对象,也能实现继承。同时又不会影响到父对象的数据。jQuery库使用的就是这种继承方法。
画了一个简单的图,希望能对你了解这篇文章有帮助:
参考资料:
维基百科
MDN JavaScript
阮一峰的网络日志:Javascript 面向对象编程
《JavaScript 权威指南》