JavaScript 面向对象入门

JavaScript是一个动态的通用面向对象编程语言,所有的现代Web浏览器均包含了JavaScript解释器,这使得JavaScript能够称得上史上使用最广泛的编程语言。

特别是自2009年后,随着Node.js 、ES5的诞生,使得JavaScript的功能能够负责“全栈”。Node.js是一个服务器端框架,基于Google的V8 JavaScript引擎创建。用Node.js去实现一层完全配置化的适配HTTP各种协议,具有缓存策略的接口路由,再通过配置或少量代码实现接口调用聚合即可完成功能,这些工作前端工程师就能干了,使用javascript来提高团队整体工作效率,完全不需要后端参与。况且在各种评测中,看到JavaScript虚拟机比Java虚拟机快个一两倍,甚至几倍已经不是什么新鲜事了。

1996年11月,网景公司将JavaScript提交给欧洲计算机制造商协会进行标准化。ECMAScript是由ECMA-262标准化的脚本语言的名称。到现在已经有近20个年头了,从ECMAScript 1版发展到了现在的ECMAScript 6(ES6),经历了5个版本的更迭(ES4被叫停);近年来,基于JavaScript各种架构横空出世,在后端和移动端都有出色的表现。仿佛这个古老的语言一夜之间咸鱼翻身。遥想当年,取名为JavaScript无非想蹭JAVA的光,谁曾想有今日的风光。

面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。它使用先前建立的范例,包括模块化,多态和封装几种技术。 Javascript并不是一种真正的面向对象编程(OOP)语言,ES6正在朝这方面努力。Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。下面,我们来看看如何将"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象。

一 . 封装

假设我们将“人”看成一个对象,他有名字、年龄两个属性。

var person={
  name:'',
  age:0
}

根据这个原型对象,我们需要来生成一个实例对象。

var person1={};
person1.name="jack";
person1.age=18;

以上就是最简单的封装了,但这样的写法有一下两个缺点:

一是如果多生成几个实例,这样写起来就非常累赘;

二是实例与原型之间,没有任何办法,可以看出有什么联系。

为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。

对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。

  function person(name, age) {
        this.name = name;
        this.age = age;
    }
    //生成实例
    var person1 = new person("jack", 18);
    var person2 = new person("baby", 17);
    console.log(person1.name);//jack

这样,person1、person2就同时拥有constructor 属性,指向它们的构造函数。

console.log(person1.constructor == person); //true
console.log(person2.constructor == person); //true

现在我们还需要为person类添加多个不变的属性:legs_num(几条腿),arms_num(几只手),以及一个方法:sayHi()。

  function person(name, age) {
        this.name = name;
        this.age = age;
        this.legs_num=2;
        this.arms_num=2;
        this.sayHi= function(){
          console.log("Hi,My name's "+this.name+",I'm"+this.age+"years old now.");
        };
    }

如果这样直接加上去,有一个很大的弊端:那就是对于每一个实例对象,属性和方法都是一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存,显得缺乏效率。

Javascript提供了一个prototype属性,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。我们可以把那些不变的属性和方法,直接定义在prototype对象上。

   function person(name, age) {
        this.name = name;
        this.age = age;
    }
    person.prototype.legs_num = 2;
    person.prototype.arms_num = 2;
    person.prototype.sayHi = function() {
        console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
    };
    //生成实例
    var person1 = new person("jack", 18);
    var person2 = new person("baby", 17);
    person1.sayHi();//Hi,My name's jack,I'm 18 years old now.
    person2.sayHi();//Hi,My name's baby,I'm 17 years old now.

为了配合prototype属性,Javascript定义了一些辅助方法:isPrototypeOf()、hasOwnProperty()。

isPrototypeOf()方法用来判断,某个proptotype对象和某个实例之间的关系。alert(person.prototype.isPrototypeOf(person1)); //true

每个实例对象都有一个hasOwnProperty()方法,用来判断是否本地属性,false值就表示继承自prototype对象的属性。alert(person1.hasOwnProperty("name")); //true

二 . 继承

 function person(name, age) {
        this.name = name;
        this.age = age;
    }
    person.prototype.legs_num = 2;
    person.prototype.arms_num = 2;
    person.prototype.sayHi = function() {
        console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
    };

function Student(name, age, className){
        this.name = name;
        this.age = age;
        this.className=className;
};

现在,我们用一个学生(Student)的构造函数,如何让它继承自人(person)这个构造函数呢?

  function person(name, age) {
        this.name = name;
        this.age = age;
    }
    person.prototype.legs_num = 2;
    person.prototype.arms_num = 2;
    person.prototype.sayHi = function() {
        console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
    };

    function Student(name, age, className) {
        person.apply(this, arguments);
        this.className = className;
    };
    var Student1 = new Student('jack', 18, 'Class 3,Grade 2');
    console.log(Student1.name); //jack
    console.log(Student1.age); //18
    console.log(Student1.className); //Class 3,Grade 2
    Student1.sayHi(); //Student1.sayHi is not a function

使用apply、call简单继承一下,发现可以继承到person,而person.prototype.sayHi这显示没有这个函数,这个错误暂时不用理他。下面我们使用使用prototype属性进行继承。

   function person(name, age) {
        this.name = name;
        this.age = age;
    }
    person.prototype.legs_num = 2;
    person.prototype.arms_num = 2;
    person.prototype.sayHi = function() {
        console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
    };


    function Student(name, age, className) {
       this.name=name;
        this.age=age;
        this.className=className;
    };
    Student.prototype = new person();
  Student.prototype.constructor = Student;

    var Student1 = new Student('jack', 18, 'Class 3,Grade 2');
    console.log(Student1.name); //jack
    console.log(Student1.age); //18
    console.log(Student1.className); //Class 3,Grade 2
    Student1.sayHi(); //Hi,My name's jack,I'm 18 years old now.

然后再修改一下代码,看看:

  function person(name, age) {
        this.name = name;
        this.age = age;
    }
    person.prototype.legs_num = 2;
    person.prototype.arms_num = 2;
    person.prototype.sayHi = function() {
        console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
    };


    function Student(name, age, className) {
       this.name=name;
        this.age=age;
        this.className=className;
    };
    Student.prototype =person.prototype;
  Student.prototype.constructor = Student;

    var Student1 = new Student('jack', 18, 'Class 3,Grade 2');
    console.log(Student1.name); //jack
    console.log(Student1.age); //18
    console.log(Student1.className); //Class 3,Grade 2
    Student1.sayHi(); //Hi,My name's jack,I'm 18 years old now.
 alert(person.prototype.constructor); //  function Student(name, age, className)

有没有发现哪里不同了?Student.prototype = new person(); 改为 Student.prototype =person.prototype; 这样做好像是少用了一个new节省了,但实际上把Animal.prototype对象的constructor属性也改掉了!在做继承的时候千万要注意,要保护好父级的代码不受影响。

alert(person.prototype.constructor);//function Student(name, age, className)

那么,我们将它改为:

Student.prototype = Object.create(person.prototype);

输出来是不是又好了呢?好了,现在回到上面继承第一个例子,我们可以来修补整段代码了

  function person(name, age) {
        this.name = name;
        this.age = age;
    }
    person.prototype.legs_num = 2;
    person.prototype.arms_num = 2;
    person.prototype.sayHi = function() {
        console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
    };

    function Student(name, age, className) {
        person.apply(this, arguments);
        this.className = className;
    };

    Student.prototype = Object.create(person.prototype);  
    Student.prototype.constructor = Student;

    var Student1 = new Student('jack', 18, 'Class 3,Grade 2');
    console.log(Student1.name); //jack
    console.log(Student1.age); //18
    console.log(Student1.className); //Class 3,Grade 2
    Student1.sayHi(); //Student1.sayHi is not a function
    alert(person.prototype.constructor); // function person(name, age)

不要被绕晕了,跟着代码做一遍就明白了。

最后用拷贝继承的方式来实现继承。这倒不是孔乙己所说的茴字到底有几种写法,有时候就需要考虑内存的资源分配、兼容性等等,实现同一目标有多种方式,可以找到最适合的一种。

   function person(name, age) {
        this.name = name;
        this.age = age;
    }
    person.prototype.legs_num = 2;
    person.prototype.arms_num = 2;
    person.prototype.sayHi = function() {
        console.log("Hi,My name's " + this.name + ",I'm " + this.age + " years old now.");
    };

    function Student(name, age, className) {
        this.name = name;
        this.age = age;
        this.className = className;
    };

    function extend(Child, Parent) {
        var p = Parent.prototype;
        var c = Child.prototype;
        for (var i in p) {
            c[i] = p[i];
        }
        c.uber = p;
    }

    extend(Student, person);

    var Student1 = new Student('jack', 18, 'Class 3,Grade 2');
    console.log(Student1.name); //jack
    console.log(Student1.age); //18
    console.log(Student1.className); //Class 3,Grade 2
    Student1.sayHi(); //Hi,My name's jack,I'm 18 years old now.
    alert(person.prototype.constructor); // function person(name, age)

这是纯粹采用"拷贝"方法实现继承:把父对象的所有属性和方法,拷贝进子对象,就能够实现继承。c.uber = p; 意思是为子对象设一个uber属性,这个属性直接指向父对象的prototype属性。这等于在子对象上打开一条通道,可以直接调用父对象的方法。

最后,我们来看看普通对象是如何进行继承操作的。

var area{
  nation:'中国'
}

var person{
  name:'jack'
}

现在我们想用person去继承area,但这两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现"继承"。json格式的创始人提出了一个object()函数,下面看看是如何做到这一点的。

var area={nation:'中国'}; 
function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
  }
 var person = object(area);
person.career = 'jack';
console.log(person.nation);//中国

下面我再给添加一个"出生地"属性,它的值是一个数组。

area.birthPlaces = ['北京','上海','香港'];
    var area = {
        nation: '中国',
      birthPlaces:['北京', '上海', '香港']
    }; 
    function object(o) {    
        function F() {}    
        F.prototype = o;    
        return new F();  
    } 
    var person = object(area);
    person.career = 'jack';
    person.birthPlaces.push('广州');
    console.log(person.nation); //中国

    console.log(area.birthPlaces);//["北京", "上海", "香港", "广州"]
    console.log(person.birthPlaces);//["北京", "上海", "香港", "广州"]

但是,这样的拷贝有一个问题。那就是,如果父对象的属性等于数组或另一个对象,因此存在父对象被篡改的可能。上面提醒过,继承要保护好父级的代码不受影响。

请看,现在给area添加一个"出生地"属性,它的值是一个数组。

下面使用深拷贝进行继承:

var area = {
        nation: '中国',
        birthPlaces: ['北京', '上海', '香港']
    };  
    function deepCopy(p, c) {    
        var c = c || {};    
        for (var i in p) {      
            if (typeof p[i] === 'object') {        
                c[i] = (p[i].constructor === Array) ? [] : {};        
                deepCopy(p[i], c[i]);      
            } else {         
                c[i] = p[i];      
            }    
        }    
        return c;  
    }

    var person = deepCopy(area);
    person.career = 'jack';
    person.birthPlaces.push('广州');
    console.log(person.nation); //中国

    console.log(area.birthPlaces); //["北京", "上海", "香港"]
    console.log(person.birthPlaces); //["北京", "上海", "香港", "广州"]

把父对象的属性,全部拷贝给子对象,也能实现继承。同时又不会影响到父对象的数据。jQuery库使用的就是这种继承方法。

画了一个简单的图,希望能对你了解这篇文章有帮助:

oop.png

参考资料:

维基百科

MDN JavaScript

阮一峰的网络日志:Javascript 面向对象编程

《JavaScript 权威指南》

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,784评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,745评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,702评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,229评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,245评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,376评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,798评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,471评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,655评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,485评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,535评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,235评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,793评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,863评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,096评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,654评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,233评论 2 341

推荐阅读更多精彩内容