面向对象

2017-11-09  本文已影响0人  z1900

1.工厂函数

  1. 创建一个空对象
  2. 为空对象添加属性&方法
  3. 返回空对象
function create(name, age){
    var person={};
    person.name=name;
    person.age=age;
    person.sayHi=function(){
        console.log('I am '+ this.name + 'I am '+ this.age +' year old!');
    }
    return person;
 }

 var p1=create('xiaoming', 18);
 p1.sayHi()

 var people=[];
 for(var i=0; i<100; i++){
    people.push(create('NO.'+i, Math.floor(Math.random()*10)))
 }

缺点:

  1. 无法判断生成对象的类型(obj,array) ===> 使用构造函数

2.构造函数

function Person(name, age){
    this.name=name;
    this.age=age;
    this.sayHi=function(){
        console.log('Hi I am '+ this.name + ', ' + this.age +' years old!')
    }
}

var p1=new Person('xiaoMing', 18);
p1.sayHi()
console.log(p1.name);

在new的时候,js引擎为我们做了几件事:

  1. 创建了一个对象
  2. 将this指针,指向了这个对象
  3. 执行构造函数里的代码
  4. 将对象返回

缺点:

  1. 每个对象都需要创建自己的函数实例,浪费资源 ===> 原型方式

3.原型方式

function Person(){

}
Person.prototype.name = 'xiaoMing';
Person.prototype.age = 13;
Person.prototype.obj=['a', 'b', 'c'];
Person.prototype.sayHi = function() {}

var p1=new Person();
p1.name = 'xiaoHui'
console.log(p1.name);//xiaoHui
p1.obj.push('d')

var p2=new Person();
console.log(p2.name);//xiaoMing
console.log(p2.obj);//['a', 'b', 'c', 'd']
  1. 每一个函数对象,都有一个属性prototype,这个prototype指向了一个对象
  2. 通过这个构造函数创建的对象,都会共享prototype上面的属性和方法
  3. 当new一个函数时,会为每个对象添加一个proto属性,这个属性指向了构造函数的prototype
  4. 在访问一个对象的属性时,是先在对象的属性上查找,如果能找到,则返回对象上面的属性,如果找不到,则在原型上面查找

缺点:

  1. 纯的原型方法没办法传递参数
  2. 当原型上面有引用类型的数据,这个数据很容易被无意中修改,导致所有用这个类创建的对象,数据都会发生变化
    ===> 组合:原型+构造函数

4.原型+构造函数

function Person(name, age){
    this.name=name;
    this.age=age;
    this.share.count++;
}

Person.prototype.sayHi=function(){
    console.log('Hi I am ' + this.name + ', ' + this.age + ' years old!')
}
  1. 共享的挂载到原型上,自有的挂载到构造函数的对象上

公共数据/共享属性:

  1. 如果所有实例化的对象都需要访问这个数据,那么不能使用基本类型,因为基本类型只能取,使用基本类型就会在对象的proto上添加,不会添加到prototype原型上,实例化对象访问不到,所以需要使用引用类型
Person.prototype.share={
    count:0
}

new Person()
new Person()
new Person()
new Person()
var p1=new Person('xiaoMing', 13);

p1.sayHi()// Hi I am xiaoMing, 13 years old!
console.log(p1.share.count);// 5
上一篇 下一篇

猜你喜欢

热点阅读