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库使用的就是这种继承方法。

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

JavaScript 面向对象入门_第1张图片
oop.png

参考资料:

维基百科

MDN JavaScript

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

《JavaScript 权威指南》

你可能感兴趣的:(JavaScript 面向对象入门)