JavaScript创建对象方法实例小结

网络编程 2024/11/20 佚名

3 1 2

本文实例讲述了JavaScript创建对象方法。分享给大家供大家参考，具体如下：

最简单的方式就是创建一个Object对象，并为其添加属性和方法。

//示例代码
var person=new Object()
person.name="yumi"
person.age=18
person.job="coder"
person.sayName=function(){
  alert(this.name)
}
person.sayName()//输出yumi

这种方式使用同一个接口创建多个对象，会出现大量重复代码。

1.工厂模式

JavaScript中无法创建类，我们可以用函数来封装以特定接口创建对象的细节。

//示例代码
function createPerson(name,age,job){
  var o=new Object();
  o.name=name;
  o.age=age;
  o.job=job;
  o.sayName=function(){
    alert(this.name)
  };
  return o;
}
var person1=createPerson("yumi",18,"coder");
var person2=createPerson("echo",21,"player");
person1.sayName();//输出yumi
person2.sayName();//输出echo

工厂模式虽然解决了创建多个相似对象的问题，但却没有解决对象识别问题，即怎样知道一个对象的类型。

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();//输出yumi
person2.sayName();//输出echo

创建出的对象既是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，跟其无关。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行结果。

更多关于JavaScript相关内容还可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JavaScript,创建对象

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“JavaScript创建对象方法实例小结”

暂无评论...

JavaScript创建对象方法实例小结

Angular5中状态管理的实现

vue自定义底部导航栏Tabbar的实现代码

评论“JavaScript创建对象方法实例小结”

更新日志

友情链接