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