JavaScript学习-面向对象与原型1

时间：2022-02-10 18:20:57

JavaScript的面向对象是非正统且怪异的。

创建对象

1、使用基本方法创建对象

var box = new Object();//创建对象
box.name = "Lee";// 添加属性
box.age = 100;
box.run = function(){// 添加方法
    return this.name + this.age + "运行中...";
}

document.write(box.run())// 打印方法执行结果

执行结果：

Lee100运行中...

注意：this表示当前作用域下的对象。如果在全局作用域，则代表的是widnow：

alert(this)

JavaScript学习-面向对象与原型1

同理我们要创建两个类似对象：

var box1 = new Object();//创建对象
box1.name = "Lee";// 添加属性
box1.age = 100;
box1.run = function(){// 添加方法
    return this.name + this.age + "运行中...";
}

var box2 = new Object();//创建对象
box2.name = "Jack";// 添加属性
box2.age = 200;
box2.run = function(){// 添加方法
    return this.name + this.age + "运行中...";
}
document.write(box1.run())
document.write("<br/>")
document.write(box2.run())

输出结果：

Lee100运行中...
Jack200运行中...

如果我们要创建很多个类似的对象，则要重复很多次，非常麻烦。

2、使用工厂方法创建对象

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);
document.write(box1.run())
document.write("<br/>")
document.write(box2.run())

输出结果：

Lee100运行中...
Jack200运行中...

可以看到，使用了工厂方法之后，创建多个类似的对象变的方便了许多。但是仍然有问题。假设我们使用不同的两个工厂方法，分别创建出不同的两个对象，然而我们无法区分这两个对象是哪个工厂方法创建的，因为这两个对象都是Object的实例。

3、使用构造函数创建对象

构造函数

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);
document.write(box1.run())
document.write("<br/>")
document.write(box2.run())
document.write("<br/>")
document.write(box1 instanceof Object)
document.write("<br/>")
document.write(box1 instanceof Box)

输出结果：

Lee100运行中...
Jack200运行中...
true// box1是Object的实例
true// box1是Box的实例

box1既是Object的实例，又是Box的实例，这样我们就可以使用不同的构造方法来区分不同的对象。

注意：

1、构造函数的函数名首字母大写（非强制，但这样写有助于区分构造函数和普通函数）；
2、创建对象时，必须new 构造函数名，如new Box();
3、构造函数没有new Object，但它后台会自动var obj = new Object;
4、this就相当于obj，后台直接将属性和方法赋值给this对象;
5、构造函数不需要返回对象引用，即没有return语句

对象冒充

function Box(name, age){
    this.name = name;
    this.age = age;
    this.run = function(){
       return this.name + this.age + "运行中..."
    }
}
var o  = new Object();
Box.call(o,'Lee',100);// 对象冒充
document.write("<br/>")
document.write(o.run())
document.write("<br/>")
document.write(o instanceof Box)

输出结果：

Lee100运行中...
false// 对象o不是Box的实例

函数名是引用类型

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('Lee',100);
document.write(box1.name == box2.name)
document.write("<br/>")
document.write(box1.age == box2.age)
document.write("<br/>")
document.write(box1.run() == box2.run())
document.write("<br/>")
document.write(box1.run == box2.run)

输出结果：

true// name属性值相等
true// page属性值相等
true// run函数返回值相等
false// 函数引用地址不相等
标签：

相关文章