Web 前端开发 让前端飞

JS中的面向对象

2017-05-04  本文已影响0人  osoLife

对象

创建对象的方式

// 方法一:使用new运算符
var obj1=new Object();

// 方法二:使用字面量方式
var obj2={};

// 存在的问题:当实例化对象时会产生大量的重复代码
// 解决方法:封装函数(即工厂方式)

使用工厂方式创建对象

function createPerson(name,age){
    var obj=new Object();
    obj.name=name;
    obj.age=age;
    obj.show=function(){
        alert('我叫'+this.name+' 今年'+this.age);
    };
    return obj;
}
var p1=createPerson('moli',30);
var p2=createPerson('michael',35);
p1.show();
p2.show();

alert(typeof p1); // object
alert(typeof p2); // object

// 存在的问题:不能确定对象具体是什么类型
// 解决方法:使用构造函数创建特定的对象

使用构造函数创建对象

function Student(name,age){
    this.name=name;
    this.age=age;
    this.show=function(){
        alert('我叫'+this.name+' 今年'+this.age);
    };
}
var stu1=new Student('moli',18);
var stu2=new Student('michael',20);
stu1.show();
stu2.show();
// instanceof:判断对象是否为某个类型的实例
alert(stu1 instanceof Student); // true
alert(stu2 instanceof Student); // true

alert(stu1.show==stu2.show); // false

// 存在的问题:同样的功能在不同的实例对象中占用不同的内存地址,会产生大量的内存浪费
// 解决方法:利用原型(改写公用的属性或方法)

原型

function Student(name,age){
    this.name=name;
    this.age=age;
}
Student.prototype.show=function(){
    alert('我叫'+this.name+' 今年'+this.age);
};
var stu1=new Student('moli',18);
var stu2=new Student('michael',20);
stu1.show();
stu2.show();
alert(stu1.show==stu2.show); //true

// O(∩_∩)O,wonderful

//  注:
//  每个函数都有一个名为prototype的属性
//  每个对象都有一个__proto__的属性指向其类型的prototype属性

容易出现的问题

function Person(){  
}
Person.prototype={
};
var p1=new Person();
alert(p1.constructor); // function Object() { [native code] }

// 将以上代码修改如下:
function Person(){          
}
Person.prototype={
    constructor:Person
};
var p1=new Person();
alert(p1.constructor); // function Person(){}

// 注:
// constructor:查看对象的构造函数
// hasOwnProperty():判断是否为对象的自有属性,而不是从原型链上继承来的属性(略)

继承

原型继承(基于原型链的继承)

// 示例代码一:
// 父类
function Person(){
    this.name='moli';
}
// 子类
function Star(){
    this.age='18';
}   
Star.prototype=new Person();
var star=new Star();
alert(star.name); // moli
alert(star.age); // 18
alert(star instanceof Star); // true
alert(star instanceof Person); // true

// 示例代码二:
// 父类
function Person(name){
    this.name=name;
    this.family=['mother','father'];
}
// 子类
function Star(){
}   
Star.prototype=new Person('moli');

var moli=new Star();
moli.family.push('brother');
alert(moli.family); // mother,father,brother
var michael=new Star();
alert(michael.family); // mother,father,brother

// 存在的问题:当原型中存在引用类型时,存在数据修改时的问题;子类的对象无法给父类传递参数
// 解决方法:对象冒充

对象冒充(借用构造函数)

// 父类
function Person(name){
    this.name=name;
    this.family=['mother','father'];
}
// 子类
function Star(name){
    Person.call(this,name);
}   
var star1=new Star('moli');
star1.family.push('brother');
alert(star1.name); // moli
alert(star1.family); // mother,father,brother

var star2=new Star('michael');
alert(star2.name); // michael
alert(star2.family); // mother,father

结束语

如果喜欢本文,记得点赞并加关注哟。

上一篇下一篇

猜你喜欢

热点阅读