浅谈JS的面向对象

来源：互联网发布：北京润和软件编辑：程序博客网时间：2024/04/29 10:53

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指的是arralert(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.yongchu) //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>

阅读全文

0 0