JavaScript创建对象方法实例小结
本文实例讲述了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生成插件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-10-10
这篇文章主要为大家详细介绍了如何利用JavaScript语言实现无缝轮播功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
这篇文章主要介绍了ES6新特性之类(Class)和继承(Extends)相关概念与用法,结合实例形式较为详细的分析了ES6中类(Class)和继承(Extends)的基本概念、语法、使用方法与注意事项,需要的朋友可以参考下2017-05-05
作为开发者,我们常面对复杂的开发环境,要应对即时通讯与数据实时更新的问题,那么该如何精准高效实现这些功能呢,下面小编就来和大家简单讲讲2025-03-03
这篇文章主要介绍了js检测数组类型的方法小结,有instanceof方法Array.isArray() 方法和Object.prototype.toString.call()方法，都是比较常用的，需要的朋友可以参考下2017-03-03
这篇文章主要介绍了JavaScript命名空间模式,结合实例形式分析了javascript命名空间模式的相关概念、原理、实现方法及操作注意事项,需要的朋友可以参考下2019-06-06
本篇文章主要介绍了详解JS: reduce方法实现 webpack多文件入口，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
JS控制CSS样式的方法...2007-10-10
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台，这篇文章主要介绍了uni-app的基本使用,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了微信小程序实现分享朋友圈的图片功能,结合实例形式分析了微信小程序实现分享到朋友圈功能的具体操作技巧,需要的朋友可以参考下2019-01-01
最新评论