JavaScript面向对象编程
什么是面向对象
通过JavaScript中内置对象的分析,介绍JavaScript中对象的初始化过程
如何自定义类
自定义类如何实现类的继承(混入)
何谓面向对象
对象的定义是人们要进行研究的任何事物,从最简单的整数到复杂的飞机等均可看作对象,它不仅能表示具体的事物,还能表示抽象的规则、计划或事件。也有的定义为“一切都是对象”然而面向对象也不能简单的等价理解成面向任何事物编程,面对一切编程?开玩笑,呵呵。因此面向对象这个对象,指的是客体。所谓客体是指客观存在的对象实体和主观抽象的概念。
在递归的四个要素中,第四个要素:
合成效益法测:同样的一件事情不要重复做很多事,这样就摒弃了编程魅力之精髓。
我们可能每天都在重复做着同样一件事情,例如以下操作:
如果我们使用常规方法,代码的编写量往往会很多,如果运用面向对象思想面向对象的三大特征,相关问题就会得到简化。
正因为如此,面向对象编程的思想显得尤为重要。
再如物理学中对于对象的理解:世上的一切事物我们都可将之抽象,分类,而装入我们抽象词典中面向对象的三大特征,每一个抽象个体便是一个对象,有相同性质的对象抽象为类。
JavaScript内置对象的分析,深入JavaScript中对象的初始化过程构造器的概念
JavaScript内置对象包括以下:String、Number、Boolean、Function、Date、RegExp、Math、JSON。
其中Math与JSON属于对象,而其他均属于对象构造器。使用以下代码进行验证:
1
2
console.log(typeof String); // function
console.log(typeof JSON); // object
这些构造器不仅能够使用new关键字实例化对象,还能起到转换类型的作用
1
2
3
4
5
var fn = Function('console.log(1)');
fn(); // 1
var date = Date();
var arr1 = Array(2) // [ , ]
var arr2 = Array('1,2') // [1,2]
上面叙述的是从正向出发,那么逆向呢?
1
2
var date = new Date();
console.log(date.constructor); // [Function: Date] node环境中
但是,这种检测方式不确定的,因为在浏览器环境下中,以上代码打印的结果却又是function Date() { [native code] },我们为了统一,全部使用Object的原型方法toString进行值的转换,结果为:
1
2
3
4
5
var date = new Date();
Object.prototype.toString.call(date.constructor); // [object Function]
// 通过这种方法查看某一对象的具体类型
Object.prototype.toString.call(new Array); // object
Object.prototype.toString.call(new Array(1)); // [object Array]
我们还可以使用instanceof查看某个对象由那个类实例化而来
1
2
var date = new Date();
date instanceof Date; // true
自定义类定义类的构造方法
1
2
3
4
5
6
7
8
9
var User = function(){
this.name = name;
this.setName = function(name){
this.name = name;
};
this.getName = function(){
return this.name;
}
};
通过以上,我们就构造了User这样一个类的构造器,接着我们就可以初始化对象了。
对象的初始化
1
2
3
var user = new User();
user.setName("walker");
user.getName() // walker
那如果我们的方法在同一类初始化的很多对象中都有呢?
这时候就有了原型方法,原型继承的思想。
原型方法
1
2
3
User.prototype.show = function(){
console.log(this.name);
};
所有该类实例化的对象都可以直接使用user.show()
原型继承中prototype和__proto__的关系,各自的功能
关系图如下:
JavaScript中对象实例化的步骤创建类并实例化一个对象
先来看看我们每天写的面向对象编程的代码:
1
2
var User = function(){};
var user = new User();
在我们看来,简单的面向对象其实就是这么两行代码,其实不然,在JavaScript内部,对象的创建可没有这么简单哦。JavaScript对象创建的过程可概括如下:
1
2
3
4
5
6
7
8
9
10
// 生成Object对象(这就印证了为何所有的类都是Object的子类)
var obj = new Object();
// 指定原型
obj.__proto__ = User.prototype;
// 调用构造器
User.call(obj);
// 如果有参数
User.call(obj,param1);
牢记这三个初始化步骤,以后开发中会使用这种思想
1
2
3
4
// var user = {};
var user = new Object();
user.__proto__ = User.prototype;
User.call(user,'walker');
开发中该思想的应用
1
2
3
var user = {}; // 其实就是new Object();
user.__proto__ = User.prototype;
User.call(user,'walker');
自定义类如何实现类的继承借用对象属性
1
2
3
4
5
var User = function(){};
var VIPPerson = function(){};
// 借用User实例化对象的属性和方法
VIPPerson.prototype = new User();
var vip = new VIPPerson();
借用原型属性和方法
1
2
3
4
var User = function(){};
var Person = function(){};
// 只是借用了User类的原型属性与方法
Person.prototype = User.prototype;
当然这种形式还存在一定问题,因为对象存储于堆内存,Person.prototype只是对其引用,会相互影响值。
临时构造对象来解决这个问题:
1
2
3
4
5
6
var User = function(){};
var Person = function(){};
// 定义
var F = function(){};
F.prototype = Person.prototype;
User.prototype = new F();
借用构造器
1
2
3
4
5
6
var User = function(){};
var Person = function(){
// 借用构造器
User.call(this);
};
Person.prototype = new User();
以上继承形式中,没有去关心类的构造器,我们为了出现偏差,在指定借用了prototype后,也要重新指定constructor。
1
2
3
4
5
var User = function(){};
var Person = function(){};
Person.prototype = new User();
// 指明Person类的构造器是Person
Person.prototype.constructor = Person;
限 时 特 惠: 本站每日持续更新海量各大内部创业教程,一年会员只需98元,全站资源免费下载 点击查看详情
站 长 微 信: muyang-0410