JavaScript面向对象编程(入门参考)

发布时间:2020-11-09编辑:脚本学堂
本文介绍下入门级的JavaScript面向对象编程的教程,通过实例学习下javascript面向编程的相关知识,有需要的朋友不妨作个参考。
Prototype和继承

先来说说 Prototype。

例子,很像C语言里的函数指针,在C语言里这样的东西见得多了。
 

复制代码 代码示例:
var plus = function(x,y){   
    document.write( x + ' + ' + y + ' = ' + (x+y) + '<br>');   
    return x + y;   
};   
    
var minus = function(x,y){   
    document.write(x + ' - ' + y + ' = ' + (x-y) + '<br>');   
    return x - y;   
};   
    
var operations = {   
    '+': plus,   
    '-': minus   
};   
    
var calculate = function(x, y, operation){   
    return operations[operation](x, y);   
};   
    
calculate(12, 4, '+');   
calculate(24, 3, '-');  

那么,能不能把这些东西封装起来呢,需要使用 prototype。

看下面的示例:
 

复制代码 代码示例:
var Cal = function(x, y){   
    this.x = x;   
    this.y = y;   
}   
    
Cal.prototype.operations = {   
    '+': function(x, y) { return x+y;},   
    '-': function(x, y) { return x-y;}   
};   
    
Cal.prototype.calculate = function(operation){   
    return this.operations[operation](this.x, this.y);   
};   
    
var c = new Cal(4, 5);   
    
c.calculate('+');   
c.calculate('-');  
 

这就是 prototype 的用法,prototype 是 javascript 这个语言中最重要的内容。网上有太多的文章介始这个东西了。说白了,prototype 就是对一对象进行扩展,其特点在于通过“复制”一个已经存在的实例来返回新的实例,而不是新建实例。被复制的实例就是所称的“原型”,这个原型是可定制的(当然,这里没有真正的复制,实际只是委托)。上面的这个例子中,扩展了实例 Cal,让其有了一个 operations 的属性和一个 calculate 的方法。
这样,可以通过这一特性来实现继承。还记得最最前面的那个 Person 吧。

例子,创建一个 Student 来继承 Person。
 

复制代码 代码示例:
function Person(name, email, website){   
    this.name = name;   
    this.email = email;   
    this.website = website;   
};   
    
Person.prototype.sayHello = function(){   
    var hello = "Hello, I am "+ this.name  + ", <br>" +   
                "my email is: " + this.email + ", <br>" +   
                "my website is: " + this.website;   
    return hello;   
};   
    
function Student(name, email, website, no, dept){   
    var proto = Object.getPrototypeOf;   
    proto(Student.prototype).constructor.call(this, name, email, website);   
    this.no = no;   
    this.dept = dept;   
}   
    
// 继承prototype   
Student.prototype = Object.create(Person.prototype);   
    
//重置构造函数   
StudentStudent.prototype.constructor = Student;   
    
//重载sayHello()   
Student.prototype.sayHello = function(){   
    var proto = Object.getPrototypeOf;   
    var hello = proto(Student.prototype).sayHello.call(this) + '<br>';   
    hello += "my student no is: " + this. no + ", <br>" +   
             "my departent is: " + this. dept;   
    return hello;   
};   
    
var me = new Student(   
    "Chen Hao",   
    "haoel@hotmail.com",   
    "http://www.jb200.com",   
    "12345678",   
    "Computer Science"   
);   
document.write(me.sayHello());  

兼容性
上面的这些代码并不一定能在所有的浏览器下都能运行,因为上面这些代码遵循 ECMAScript 5 的规范,关于 ECMAScript 5 的浏览器兼容列表,你可以看这里“ES5浏览器兼容表”。

本文中的所有代码都在 Chrome 最新版中测试过了。

下面是一些函数,可以用在不兼容 ES5 的浏览器中:
 

复制代码 代码示例:

Object.create ()函数
function clone(proto) {   
    function Dummy() { }   
    
    Dummy.prototype             = proto;   
    DummyDummy.prototype.constructor = Dummy;   
    
    return new Dummy(); //等价于Object.create(Person);   
}   
    
var me = clone(Person);  

defineProperty ()函数
function defineProperty(target, key, descriptor) {   
    if (descriptor.value){   
        target[key] = descriptor.value;   
    }else {   
        descriptor.get && target.__defineGetter__(key, descriptor.get);   
        descriptor.set && target.__defineSetter__(key, descriptor.set);   
    }   
    
    return target   
}  
 
keys ()函数
function keys(object) { var result, key   
    result = [];   
    for (key in object){   
        if (object.hasOwnProperty(key))  result.push(key)   
    }   
    
    return result;   
}  

Object.getPrototypeOf() 函数
function proto(object) {   
    return !object?                null   
         : '__proto__' in object?  object.__proto__   
         : /* not exposed? */      object.constructor.prototype   
}  
 
 
bind函数
var slice = [].slice   
function bind(fn, bound_this) { var bound_args   
    bound_args = slice.call(arguments, 2)   
    return function() { var args   
        args = bound_args.concat(slice.call(arguments))   
        return fn.apply(bound_this, args) }   
}

到此,有关javascript面向对象编程的入门教程,就介绍完了,希望对大家理解与掌握javascript面向对象编程的内容,有一定的帮助。

您可能感兴趣的文章:
理解JavaScript中的面向对象
深入解析 Javascript 面向对象编程
JavaScript 面向对象的原型与实例分析
JavaScript面向对象的一个例子
JavaScript 面向对象(OOP)的语法参考
javascript面向对象之this用法举例
javascript面向对象编程之this详解
javascipt面向对象扩展的例子
javascipt面向对象之成员函数实例
javasrcipt 面向对象编程的例子