我爱模板网 > 建站教程 > JS、jQ、TS >  ES5定义类的几种方法正文

ES5定义类的几种方法

ES5之前并没有什么正规的class来定义类,下面是定义类的一些变通的方法:
1.工厂模式
function createObject(name,age){
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.getName = function(){
    return this.name;
  };
  obj.getAge = function(){
    return this.age;
  }
  return obj;
}
var obj2 = createObject("王五",19);
console.log(obj2.getName());
console.log(obj2.getAge());
console.log(obj2.constructor);
    工厂模式的方法创建对象,工厂模式可以根据接受的参数来创建一个包含必要信息的对象,可以无限次数的调用这个方法,每次都返回一个包含2个属性2个方法的对象。工厂模式解决了创建类似对象的问题,但没有解决对象的识别问题,即不能确定一个对象的类别,统一为Object。

2.构造函数法
function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
}
 
Person.prototype = {
  constructor:Person,
  getName:function(){
    return this.name;
  },
  getAge:function(){
    return this.age;
  },
  getJob:function(){
    return this.job;
  }
}
 
var p = new Person("二麻子",18,"worker");
console.log(p.constructor);
console.log(p.getName());
console.log(p.getAge());
console.log(p.getJob());
    构造函数的方式虽然确定了对象的归属问题,能够确定对象的类型,但构造函数中的方法需要在每个对象中都要重新创建一遍,导致一些性能问题

构造函数补充:
function Persion(){
    this.name = '张三';
    this.age = 20;
    this.eat = function(){
        alert(this.name+'在吃饭');
    }
}

//通过原型链添加的方法,所有此类的实例都能调用这个方法:
Persion.prototype.height = '170cm';

var p = new Persion();
p.eat();  // 张三在吃饭
alert(p.name)  // 张三
alert(p.height)  // 170cm

//静态方法,只能直接调用,不能用实例调用
Persion.goto = function(){
    alert('我是静态方法');
}
Persion.goto();  // 我是静态方法
p.goto();  // 报错,静态方法实例不能调用
3.原型模式
function Person(){
 
}
Person.prototype = {
  constructor:Person,
  name:"张三",
  age:21,
  job:"teacher",
  getName:function(){
    return this.name;
  },
  getJob:function(){
    return this.job;
  }
}
 
var p = new Person();
console.log(p.getName()); //张三
console.log(p.getJob()); //teacher
var p2 = new Person();
p2.name = "李四";
console.log(p2.getName()); //李四
    由实例代码我们可以知道,对象实例可以访问原型中的值,但不能重写原型中的值,如果对象实例中定义了和原型重名的属性,那么该属性就会屏蔽原型中的那个属性,但并不会重写。

4.封装
var Dog = {
  createDog:function(){
    var dog = {};
    dog.name = "汪汪";
    dog.sayHello = function(){
      console.log("Hello World!");
    };
    return dog;
  }
};
var dog = Dog.createDog();
dog.sayHello();
    就是把代码都封装起来,将实例对象作为一个整体返回,有点类似于工厂模式。

部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:typeScript中的 ?: 问号冒号解释,ts可选参数 下一篇:ES5类的继承详解
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢