JavaScript中创建对象方法总结
2017-02-11 20:41
567 查看
最简单的方式就是创建一个Object对象,并为其添加属性和方法。
这种方式使用同一个接口创建多个对象,会出现大量重复代码。
1.工厂模式
JavaScript中无法创建类,我们可以用函数来封装以特定接口创建对象的细节。
工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别问题,即怎样知道一个对象的类型。
2.构造函数模式
可以创建自定义的构**造函数,从而定义自定义对象类型的属性和方法。
创建出的对象既是Object的实例,也是Person的实例,也就是说将来我们可以将它的实例标识为特定类型,这也是优于工厂模式的地方。但是构造函数模式也有缺点,即就是每实例化一个对象,对象方法都会创建一遍,我们可以按如下方法稍加改进:
将函数拿到构造函数外部,构造函数内部将sayName属性设成全局sayName函数(一般单独的函数名存放的是指向该函数的指针,而函数名加括号为该函数的执行结果)。但这样做,暴露出的问题是:全局作用域中定义的函数只能被某一个对象调用,不符合全局定义了。而且,如果某个对象有很多方法,这些方法都定义在全局作用域的话,也就没什么封装性可言了。
3.原型模式
前面我们说了,构造函数模式的缺点是属性或方法在构造函数作用域中只能被某个对象调用,想想我们在其他面向对象语言中的处理方式,是将公用的属性方法定义在父类中,然后通过继承父类调用。但是JavaScript中不存在类、继承这些概念,而是通过原型链实现“继承”。
下面就是我们要说的原型模式:
无论什么时候,只要创建了一个新函数,就会为该函数创建一个prototype属性。默认情况下,所有prototype属性都会自动获得一个constructor(构造函数)属性。这个属性包含一个指向prototype属性所在函数的指针。也就是说,Person可以理解为一个类(实际是个函数),Person.prototype指向原型(原型中定义的方法或属性可以被对象调用,相当于一个共享区域),然后Person.prototype.constructor又指向了Person。实例化的对象有一个内部属性可以指向Person.prototype,但是不能指向构造函数constructor,跟其无关。
//示例代码 var person=new Object() person.name="yumi" person.age=18 person.job="coder" person.sayName=function(){ alert(this.name) } person.sayName()
这种方式使用同一个接口创建多个对象,会出现大量重复代码。
1.工厂模式
JavaScript中无法创建类,我们可以用函数来封装以特定接口创建对象的细节。
//示例代码 function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age= 4000 age; o.job=job; o.sayName=function(){ this.alert(name) }; return o; } var person1=createPerson("yumi",18,"coder"); var person2=createPerson("echo",21,"player"); person1.sayName(); person2.sayName();
工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别问题,即怎样知道一个对象的类型。
2.构造函数模式
可以创建自定义的构**造函数,从而定义自定义对象类型的属性和方法。
//示例代码 function Person(name,age,job){ this.name=name; this.age=age; this.job=job; this.sayName=function(){ alert(name); } } var person1=new Person("yumi",18,"coder"); var person2=new Person("echo",21,"player"); person1.sayName(); person2.sayName();
创建出的对象既是Object的实例,也是Person的实例,也就是说将来我们可以将它的实例标识为特定类型,这也是优于工厂模式的地方。但是构造函数模式也有缺点,即就是每实例化一个对象,对象方法都会创建一遍,我们可以按如下方法稍加改进:
//示例代码 function Person(name,age,job){ this.name=name; this.age=age; this.job=job; this.sayName=sayName; } function sayName(){ alert(name); } var person1=new Person("yumi",18,"coder"); var person2=new Person("echo",21,"player"); person1.sayName(); person2.sayName();
将函数拿到构造函数外部,构造函数内部将sayName属性设成全局sayName函数(一般单独的函数名存放的是指向该函数的指针,而函数名加括号为该函数的执行结果)。但这样做,暴露出的问题是:全局作用域中定义的函数只能被某一个对象调用,不符合全局定义了。而且,如果某个对象有很多方法,这些方法都定义在全局作用域的话,也就没什么封装性可言了。
3.原型模式
前面我们说了,构造函数模式的缺点是属性或方法在构造函数作用域中只能被某个对象调用,想想我们在其他面向对象语言中的处理方式,是将公用的属性方法定义在父类中,然后通过继承父类调用。但是JavaScript中不存在类、继承这些概念,而是通过原型链实现“继承”。
下面就是我们要说的原型模式:
//示例代码 function Person(){ Person.prototype.name"yumi"; Person.prototype.age=18; Person.prototype.job=coder; Person.prototype.sayName=function(){ alert(name); } } var person1=new Person(); var person2=new Person(); person1.sayName(); //"yumi" person2.sayName(); //"yumi" alert(person1.sayName==person2.sayName); //true
无论什么时候,只要创建了一个新函数,就会为该函数创建一个prototype属性。默认情况下,所有prototype属性都会自动获得一个constructor(构造函数)属性。这个属性包含一个指向prototype属性所在函数的指针。也就是说,Person可以理解为一个类(实际是个函数),Person.prototype指向原型(原型中定义的方法或属性可以被对象调用,相当于一个共享区域),然后Person.prototype.constructor又指向了Person。实例化的对象有一个内部属性可以指向Person.prototype,但是不能指向构造函数constructor,跟其无关。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- 只需四个步骤几行代码,即可快速实现直播弹幕功能
- 浅析 Node.js 的 vm 模块以及运行不信任代码
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- JavaScript 基础、进阶以及 Ubuntu 系统中的 JavaScript 开发调试工具
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 设计模式---状态模式在web前端中的应用
- SUI踩坑记录
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因