≡
  • 网络编程
  • 数据库
  • CMS技巧
  • 软件编程
  • PHP笔记
  • JavaScript
  • MySQL
位置：首页 > 网络编程 > JavaScript

Javascript的面向对象入门实例（三）

人气：617 时间：2018-09-25

这篇文章主要为大家详细介绍了Javascript的面向对象入门实例（三），具有一定的参考价值，可以用来参考一下。

在Javascript中，虽然借助原型链就可以实现继承，但这里面还是有很多细节问题的要处理的。分析并解决这些问题后，就可以把创建类的过程写成一个通用函数了。

constructor属性

Javascript中的对象都有一个constructor的属性指向其构造函数。例如： 

/**
 * 面向对象入门实例
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
function A() { }
var a = new A();
a.constructor; // A
确切地说，constructor属性是位于构造函数的prototype上。下面的代码可以证实这一规则： 

/**
 * 面向对象入门实例
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
function A() { }

var a = new A();
console.log(a.constructor); // A

delete A.prototype.constructor; // 删除原型上的constructor属性
console.log(a.constructor); // Object
由于删除了A.prototype下的constructor属性，所以访问a.constructor的时候，在原型链中的查找就得查到Object.prototype上去，而Object.prototype.constructor自然就是Object。

现在看一下简单的原型链继承方案带来的问题： 

/**
 * 面向对象入门实例
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
function A() { }
function B() { }
B.prototype = new A();

var a = new A();
a.constructor; // A
var b = new B();
b.constructor; // A
可见，b的constructor应为B，但却成了A。原因是：b.constructor即B.prototype.constructor，而此时B.prototype是一个A对象，A对象的constructor即A.prototype.constructor，而A.prototype.constructor正是A。

幸好constructor是一个可写的属性，所以只要重新设定这个值，问题就解决了： 

/**
 * 面向对象入门实例
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
function A() { }
function B() { }
B.prototype = new A();
B.prototype.constructor = B; // important

var a = new A();
a.constructor; // A
var b = new B();
b.constructor; // B

instanceof操作符

从字面意思来看，instanceof用于判断某个对象是否某个类的实例，但准确地说，它是用于检测某个对象的原型链中是否包含某个构造函数的prototype。举个例子： 

/**
 * 面向对象入门实例
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
var arr = new Array();
arr instanceof Array; // true
arr instanceof Object; // true
由于Array.prototype和Object.prototype都在arr的原型链中，所以上面的测试结果均为true。另外还要注意，instanceof的检测只跟原型链有关，跟constructor属性没有任何关系。所以，基于原型链的继承不会影响到instanceof的检测。

带参数的构造函数


前面通过原型链实现继承的例子中，构造函数都是不带参数的，一旦有参数，这个问题就复杂很多了。先看看下面的例子： 

/**
 * 面向对象入门实例
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
function A(data) {
    this.name = data.name;
}
A.prototype.sayName = function() {
    console.log(this.name);
};
function B() { }
B.prototype = new A();
B.prototype.constructor = B;

var b = new B();
这段代码运行的时候会产生异常：
Cannot read property 'name' of undefined

出现异常的代码就是A构造函数内的那一行。出现异常的原因是：要访问data.name，就得保证data不为null或undefined，但是执行B.prototype=new A()时，却没有传参数进去，此时data为undefined，访问data.name就会出现异常。

仅解决这个问题并不难，只要在new A()时传入一个不为null且不为undefined的参数就行： 

/**
 * 面向对象入门实例
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
function A(data) {
    this.name = data.name;
}
A.prototype.sayName = function() {
    console.log(this.name);
};
function B() { }
B.prototype = new A({ });
B.prototype.constructor = B;

var b = new B();
b.sayName(); // undefined
然而，实际情况远没有这么简单。

其一，A的参数可能不止一个，其内部逻辑也可能更为复杂，随便传参数进去很有可能导致异常。要彻底解决这个问题，可以借助一个空函数： 

/**
 * 面向对象入门实例
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
function A(data) {
    this.name = data.name;
}
A.prototype.sayName = function() {
    console.log(this.name);
};
function B() { }

function Empty() { }
Empty.prototype = A.prototype; // important
B.prototype = new Empty();
B.prototype.constructor = B;

var b = new B();
b.sayName(); // undefined
Empty即为该空函数，它的prototype被更改为A.prototype，即Empty与A共享同一个prototype。因此，在忽略构造函数内部逻辑的前提下，把B.prototype设成Empty的实例跟设成A的实例效果是一样的。但因为Empty内部没有逻辑，所以new Empty()肯定不会产生异常。

此外，ES5中的Object.create也可以解决这个问题： 

/**
 * 面向对象入门实例
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
function A(data) {
    this.name = data.name;
}
A.prototype.sayName = function() {
    console.log(this.name);
};

function B() { }
B.prototype = Object.create(A.prototype); // important
B.prototype.constructor = B;

var b = new B();
b.sayName(); // undefined
其二，很多时候我们需要把子类构造函数的参数传给父类构造函数。比如说达到这样的效果： 

var b = new B({ name: 'b1' });
b.name; // 'b1'
这就需要在子类构造函数中调用父类构造函数： 

/**
 * 面向对象入门实例
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
function A(data) {
    this.name = data.name;
}
function B() {
    A.apply(this, arguments); //important
}

function Temp() { }
Temp.prototype = A.prototype;
B.prototype = new Temp();
B.prototype.constructor = B;

var b = new B({ name: 'b1' });
console.log(b.name);
通过A.apply(this, arguments)就可以确保操作的对象为当前对象（this），且把所有参数（arguments）传到A。

createClass函数

总算是完全解决了这些细节问题，为了不在每次创建类的时候都要写这么一大堆代码，我们把这个过程写成一个函数： 

/**
 * 面向对象入门实例
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
function createClass(constructor, methods, Parent) {
    var $Class = function() {
        // 有父类的时候，需要调用父类构造函数
        if (Parent) {
            Parent.apply(this, arguments);
        }
        constructor.apply(this, arguments);
    };

    if (Parent) {
        // 处理原型链
        var $Parent = function() { };
        $Parent.prototype = Parent.prototype;
        $Class.prototype = new $Parent();
        // 重设constructor
        $Class.prototype.constructor = $Class;
    }

    if (methods) {
        // 复制方法到原型
        for (var m in methods) {
            if ( methods.hasOwnProperty(m) ) {
                $Class.prototype[m] = methods[m];    
            }
        }
    }

    return $Class;
}
在这个函数的基础上，把计算周长的问题解决掉： 

/**
 * 面向对象入门实例
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
// 形状类
var Shape = createClass(function() {
    this.setName('形状');
}, {
    getName: function() { return this._name; },
    setName: function(name) { this._name = name; },
    perimeter: function() { }
});

// 矩形类
var Rectangle = createClass(function() {
    this.setLength(0);
    this.setWidth(0);
    this.setName('矩形');
}, {
    setLength: function(length) {
        if (length < 0) {
            throw new Error('...');
        }
        this.__length = length;
    },
    getLength: function() { return this.__length; },
    setWidth: function(width) {
        if (width < 0) {
            throw new Error('...');
        }
        this.__width = width;
    },
    getWidth: function() { return this.__width; },
    perimeter: function() {
        return (this.__length + this.__width) * 2;
    }
}, Shape);

// 正方形类
var Square = createClass(function() {
    this.setLength(0);
    this.setName('正方形');
}, {
    setLength: function(length) {
        if (length < 0) {
            throw new Error('...');
        }
        this.__length = length;
    },
    getLength: function() { return this.__length; },
    perimeter: function() {
        return this.__length * 4;
    }
}, Shape);

// 圆形
var Circle = createClass(function() {
    this.setRadius(0);
    this.setName('圆形');
}, {
    setRadius: function(radius) {
        if (radius < 0) {
            throw new Error('...');
        }
        this.__radius = radius;
    },
    getRadius: function() { return this.__radius; },
    perimeter: function() {
        return 2 * Math.PI * this.__radius;
    }
}, Shape);


function computePerimeter(shape) {
    console.log( shape.getName() + '的周长是' + shape.perimeter() );
}

var rectangle = new Rectangle();
rectangle.setWidth(10);
rectangle.setLength(20);
computePerimeter(rectangle);

var square = new Square();
square.setLength(10);
computePerimeter(square);

var circle = new Circle();
circle.setRadius(10);
computePerimeter(circle);

最后

最后总结一下在Javascript中模拟面向对象的要点：
new的是构造函数，而不是类；
属性写在构造函数内，方法写到原型链上；
继承可以通过原型链实现；
封装难以实现，可通过代码规范来约束。

此外，鉴于构造函数是函数，普通函数也是函数，建议通过不同的命名规则区分它们：给构造函数命名时使用Pascal命名法，给普通函数命名时使用驼峰命名法。

本文来自：http://www.q1010.com/174/1650-0.html

注：关于Javascript的面向对象入门实例（三）的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：面向对象

您可能感兴趣的文章

  • PHP 面向对象实现数据库登陆类的简单示例
  • php 完全面向对象操作mssql数据库类的入门实例
  • php 一个完全面向对象的RSS/XML类的简单示例
  • PHP 面向对象的mysql数据库操作类功能实例
上一篇：JS加密联系方式实现方法
下一篇：Javascript中的面向对象入门实例（二）
热门文章
  • js随机生成两位数
  • js 文字超出部分隐藏、点击显示更多示例
  • 原生JS+css 点击查看全文的简单示例(类似今日头条效果)
  • javascript实现文字隐藏、展开收起的简单示例
  • JS 展开/收起按钮显示隐藏文字示例
  • JavaScript 正则判断文本是否含有超链接的简单示例
  • 原生JS实现鼠标悬停图片显示文字的简单示例
  • JS 点击按钮显示更多内容的简单示例
  • 原生js for循环遍历二维数组、嵌套元素的简单示例
  • javascript 浮点数转换成整数三种方法
  • 最新文章
    • js获取时间，处理时间等的实现方法
    • JavaScript 判断小数是否相等的简单示例
    • JavaScript 获取数组极值的简单示例
    • JavaScript防抖 & 节流的简单示例
    • JavaScript深拷贝的简单示例
    • JavaScript数组降维的简单示例
    • JavaScript手机端判断浏览器类型的简单示例
    • JavaScript获取 URL 中的参数的简单示例
    • JavaScript以“天”为单位获取响应的时间戳的简单示例
    • JavaScript时间格式化的简单示例

四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。