您的位置：首页 > Web前端 > JavaScript

浅谈JS的面向对象

2017-06-27 20:29 127 查看

ECMAScript有两种开发模式：1.函数式(过程化)，2.面向对象(OOP)。面向对象的语言有一个标志，那就是类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。但是，ECMAScript没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。

1.什么是对象

简单来说，一切事物皆对象，比如电视机就是一个对象，很具体的一个实例。

创建对象

创建一个对象，然后给这个对象新建属性和方法（其实就是挂载在某个对象上面的变量和函数）。

var box = new Object();   //创建一个 Object对象
box.name = 'Lee';//创建一个 name属性并赋值
box.age = 100;//创建一个 age属性并赋值
box.run = function () {//创建一个 run()方法并返回值
return this.name + this.age + '运行中...';
};
alert(box.run());//输出属性和方法的值

上面创建了一个对象，并且创建属性和方法，在 run()方法里的 this，就是代表 box对象本身。这种是 JavaScript创建对象最基本的方法，但有个缺点，想创建一个类似的对象，就会产生大量的代码。

2.什么是面向对象（是一种思想）

（1）使用对象时，只关注对象提供的功能，不关注其内部细节，比如JQ；

（2）在JS中，要学会构造新的对象。

3.面向对象编程（OOP）的特点

（1）抽象：抓住关键需要的点（比如员工工资发放系统，只需要知道名字，工号就可以，不需要身高，体重之类的属性）；

（2）继承：父亲有一些功能，儿子继承了这些功能。儿子还可以根据自己的需要有些新的功能和特征。目的是为了最大目的的重用代码；

（3）封装：把功能写出方法，jq就是面向对象写法；

（4）多态：例如组件开发。

4.this的含义

this 其实就是代表当前作用域对象的引用。如果在全局范围 this 就代表 window 对象，如果在构造函数体内，就代表当前的构造函数所声明的对象。

简单来说，当前的这个方法属于谁的，this就指谁。见下面代码。

var arr = [1,2,3];
arr.a = 12;
arr.show = function(){ //这个function属于arr的，所以this指的是arr
alert(this.a); //弹出12

5.构造函数

构造函数就是构造对象的函数。

构造函数模式

function Box(name, age) {//构造函数模式
this.name = name;
this.age = age;
　　this.run = function () {
　　return this.name + this.age + '运行中...';
　　};
}
var box1 = new Box('Lee', 100);
var box2 = new Box('Jack',200);
alert(box1.run());
alert(box1 instanceof Box); //很清晰的识别他从属于Box

工厂模式

function createObject(name, age) { //集中实例化的函数
var obj = new Object();
　　obj.name = name;
　　obj.age = age;
　　 obj.run = function () {
　　　　 return this.name + this.age + '运行中...';
　　　　};
　　return obj;
}

var box1 = createObject('Lee', 100);//第一个实例
var box2 =createObject('Jack',200);//第二个实例
alert(box1.run());   //Lee100运行中...
alert(box2.run());   //Jack200运行中...
//保持独立
var obj = fn("one","eat") //没有new关键字
var obj2 = fn("two","eat")
alert(obj.yongchu == obj2.yon
9fd8
gchu) //false功能一样却不相等，同样功能占用了更多的内存，浪费。

工厂方式的缺点

1.没有new。

2.不同对象具有相同方法时，方法却不相等，代码虽然封装了，但是在对象调用方法的过程中，其实是另外的一个代码段。浪费内存，造成系统资源的浪费。

使用了构造函数的方法，和使用工厂模式的方法他们不同之处如下：

1.构造函数方法没有显示的创建对象(new Object())；

2.直接将属性和方法赋值给 this 对象；

3.没有 renturn 语句。

构造函数的方法有一些规范：

1.函数名和实例化构造名相同且大写，(PS：非强制，但这么写有助于区分构造函数和普通函数)；

2.通过构造函数创建对象，必须使用 new 运算符。

6.原型

原型可以用来构造属性和方法，让属性和方法变成公用的代码；内存当做节约资源，提供系统性能；

我们创建的每个函数都有一个 prototype(原型)属性，这个属性是一个对象，它的用途是包含可以由特定类型的所有实例共享的属性和方法。逻辑上可以这么理解：prototype 通过调用构造函数而创建的那个对象的原型对象。使用原型的好处可以让所有对象实例共享它所包含的属性和方法。也就是说，不必在构造函数中定义对象信息，而是可以直接将这些信息添加到原型中。

原型模式的执行流程：

1.先查找构造函数实例里的属性或方法，如果有，立刻返回；

2.如果构造函数实例里没有，则去它的原型对象里找，如果有，就返回；

混合方式+原型去写构造函数:弥补了工厂方式的不足

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function Creat(nam,se){//构造函数：加属性
//var this=new Object();
this.name=nam;
this.sex=se;
//return this;
}

//原型：加方法
Creat.prototype.showName=function(){
alert(this.name);
}
Creat.prototype.showSex=function(){
alert(this.sex);
}

//使用：用类去创建实例
var p1=new Creat('张三','男');
var p2=new Creat('李四','男');
p1.showName();//对象名.方法名
</script>
</head>
<body>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航