脚本宝典收集整理的这篇文章主要介绍了温故知新之javascript面向对象,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
基本概念
类和实例是大多数面向对象编程语言的基本概念
类:类是对象的类型模板
实例:实例是根据类创建的对象
但是,JavaScript
语言的对象体系,不是基于“类”的,而是基于构造函数(constructor
)和原型链(prototype
)。了与普通函数区别,构造函数名字的第一个字母通常大写。
构造函数的特点有两个。
new
与构造函数
-
new命令本身就可以执行构造函数,所以后面的构造函数可以带括号,也可以不带括号。
下面两行代码是等价的。
VAR v = new Vehicle();
var v = new Vehicle;
应该非常小心,避免出现不使用new命令、直接调用构造函数的情况。为了保证构造函数必须与new命令一起使用,一个解决办法是,在构造函数内部使用严格模式,即第一行加上use strict
。
原理:由于在严格模式中,函数内部的this
不能指向全局对象,默认等于undefined
,导致不加new调用会报错(JavaScript
不允许对undefined
添加属性)。
-
new命令的原理
即:
var obj = {};
obj.__PRoto__ = Base.prototyPE;
Base.call(obj);
构造函数的return
如果构造函数内部有return语句,而且return后面跟着一个对象,new命令会返回return语句指定的对象;否则,就会不管return语句,返回this对象。
如果对普通函数(内部没有this关键字的函数)使用new命令,则会返回一个空对象
这里遇到了一个问题,问题描述如下普通函数用new测试的时候箭头函数报错了
创建对象
JavaScript
对每个创建的对象都会设置一个原型,指向它的原型对象。
当我们用obj.xxx
访问一个对象的属性时,JavaScript
引擎先在当前对象上查找该属性,如果没有找到,就到其原型对象上找,如果还没有找到,就一直上溯到Object.prototype
对象,最后,如果还没有找到,就只能返回undefined
。
例如,创建一个Array对象:
var arr = [1, 2, 3];
其原型链是:
arr ----> Array.prototype ----> Object.prototype ----> null
Array.prototype
定义了indexOf()、shift()
等方法,因此你可以在所有的Array
对象上直接调用这些方法。
很容易想到,如果原型链很长,那么访问一个对象的属性就会因为花更多的时间查找而变得更慢,因此要注意不要把原型链搞得太长。
new Student()
function Student(name) {
this.name = name;
this.hello = function () {
alert('Hello, ' + this.name + '!');
}
}
var xiaoming= new Student('xiaoming'),
xiaohong= new Student('xiaohong');
xiaoming ↘
xiaohong -→ Student.prototype ----> Object.prototype ----> null
xiaojun ↗
用new Student()创建的对象还从原型上获得了一个constructor
属性,它指向函数Student
本身:
xiaoming.constructor === Student.prototype.constructor; // true
Student.prototype.constructor === Student; // true
Object.getPrototypeOf(xiaoming) === Student.prototype; // true
xiaoming instanceof Student; // true
constructor
constructor属性的作用,是分辨原型对象到底属于哪个构造函数。
function F() {};
var f = new F();
f.constructor === F // true
f.constructor === RegExp // false
上面代码表示,使用constructor属性,确定实例对象f的构造函数是F,而不是RegExp。
构造函数继承 VS 原型链继承
xiaoming.name
//"xiaoming"
xiaohong.name
//"xiaohong"
xiaoming.hello
/*function() {
alert('Hello, ' + this.name + '!');
}
*/
xiaohong.hello
/*function() {
alert('Hello, ' + this.name + '!');
}
*/
xiaoming.hello === xiaohong.hello
//false
xiaoming和xiaohong各自的name不同,这是对的,否则我们无法区分谁是谁了。
xiaoming和xiaohong各自的hello是一个函数,但它们是两个不同的函数,虽然函数名称和代码都是相同的!
如果我们通过new Student()
创建了很多对象,这些对象的hello函数实际上只需要共享同一个函数就可以了,这样可以节省很多内存。
要让创建的对象共享一个hello函数,根据对象的属性查找原则,我们只要把hello函数移动到xiaoming、xiaohong这些对象共同的原型上就可以了,也就是Student.prototype
:
修改代码如下:
function Student(name) {
this.name = name;
}
Student.prototype.hello = function () {
alert('Hello, ' + this.name + '!');
};
xiaoming.hello === xiaohong.hello
//true
继承方式对比
-
借用构造函数继承
基本思想很简单,在子类型的构造函数内部调用父类型的构造函数:
function SuperType(){
this.colors = ["red", "blue", "green"];
}
function SuBType(){
//继承了 SuperType
SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"
问题:方法都在构造函数内部定义,函数的复用性就无从谈起了。在超类型的原型中定义的方法,对子类型而言是不可见的。考虑这些问题,借用构造函数也是很少单独使用。
-
组合继承
实现的思路是使用原型链实现对原型属性和方法的继承,而通过constructor stealing技术实现对实例属性的继承。
function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
//继承属性
SuperType.call(this, name);
this.age = age;
}
//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27
组合继承避免了原型链和借用构造函数的缺陷,融合两者之长,是最常用的JS继承模式。
原型式继承
如果只是想让一个对象与另一个对象保持类似的情况下,没有必要兴师动众地创建构造函数。我们可以使用原型式继承。
Rect.prototype = Object.create(Shape.prototype);
原型继承
JavaScript的原型继承实现方式就是:
借助中间函数F实现原型链继承,最好通过封装的inherITs函数完成;
-
继续在新的构造函数的原型上定义新方法。
var print = require('./print.js');
function Student(props) {
this.name = props.name || 'Unnamed';
}
Student.prototype.hello = function () {
print('Hello, ' + this.name + '!');
};
function Sub(props) {
Student.call(this, props);
this.grade = props.grade || 1;
}
Sub.prototype.getGrade = function() {
return this.grade;
};
function inherits(Child, Parent) {
var F = function() {};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
}
inherits(Sub, Student);
var xiaoming = new Sub({
name: 'xiaoming',
grade: 100
});
print(xiaoming.name + ' ' + xiaoming.grade);
print(xiaoming instanceof Student);
print(xiaoming instanceof Sub);
class
继承
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert('Hello, ' + this.name + '!');
}
}
class PrimaryStudent extends Student {
constructor(name, grade) {
super(name); // 记得用super调用父类的构造方法!
this.grade = grade;
}
myGrade() {
alert('I am at grade ' + this.grade);
}
}
ES6引入的class和原有的JavaScript原型继承有什么区别呢?实际上它们没有任何区别,class的作用就是让JavaScript引擎去实现原来需要我们自己编写的原型链代码。简而言之,用class的好处就是极大地简化了原型链代码。
这里遇到的问题是isPrototypeOf的问题
多重继承
JavaScript
不提供多重继承功能,即不允许一个对象同时继承多个对象。但是,可以通过变通方法,实现这个功能。
function M1() {
this.hello = 'hello';
}
function M2() {
this.world = 'world';
}
function S() {
M1.call(this);
M2.call(this);
}
S.prototype = M1.prototype;
var s = new S();
s.hello // 'hello'
s.world // 'world'
s instanceof M2
//false
上面代码中,子类S同时继承了父类M1和M2。当然,从继承链来看,S只有一个父类M1,但是由于在S的实例上,同时执行M1和M2的构造函数,所以它同时继承了这两个类的方法。
扩展
-
apply的应用:转换类似数组的对象
Array.prototype.slice.apply({0:1,length:1})
// [1]
Array.prototype.slice.apply({0:1})
// []
Array.prototype.slice.apply({0:1,length:2})
// [1, undefined]
Array.prototype.slice.apply({length:1})
// [undefined]
-
bind结合call,可以改写一些JavaScript原生方法的使用形式
[1, 2, 3].slice(0, 1)
// [1]
// 等同于
Array.prototype.slice.call([1, 2, 3], 0, 1)
// [1]
call方法实质上是调用Function.prototype.call方法,因此上面的表达式可以用bind方法改写。
var push = Function.prototype.call.bind(Array.prototype.push);
var pop = Function.prototype.call.bind(Array.prototype.pop);
var a = [1 ,2 ,3];
push(a, 4)
a // [1, 2, 3, 4]
pop(a)
a // [1, 2, 3]
-
某个属性到底是原型链上哪个对象自身的属性。
function getDefiningObject(obj, propKey) {
while (obj && !{}.hasOwnProperty.call(obj, propKey)) {
obj = Object.getPrototypeOf(obj);
}
return obj;
}
-
获取实例对象obj的原型对象,有三种方法。
obj.__proto__
obj.constructor.prototype
Object.getPrototypeOf(obj)
推荐最后一种
面向对象感觉还没怎么搞明白,模块的东西还没弄明白,有时间补上
参考资料
以上是脚本宝典为你收集整理的温故知新之javascript面向对象全部内容,希望文章能够帮你解决温故知新之javascript面向对象所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。