JavaScript创建对象方法实例小结

2024-09-28 10:36:51

本文实例讲述了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程序设计有所帮助。

js面向对象多种创建对象方法小结

开始创建对象: 1.对象字面量. 复制代码代码如下: var clock={ hour:12, minute:10, second:10, showTime:function(){ alert(this.hour+":"+this.minute+":"+this.second); } } clock.showTime();//调用 2.创建Object实例复制代码代码如下: var clock = new Object(); clock.hour=12; cl
javascript工厂模式和构造函数模式创建对象方法解析

工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程(本书后面还将讨论其他设计模式及其在JavaScript 中的实现).考虑到在ECMAScript 中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的细节,如下面的例子所示. function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName
详解js 创建对象的几种方法

在js中创建对象的方法可分为6种,分别是:基本模式.工厂模式.构造函数模式.原型模式.组合模式.动态原型模式,接下来分别看下这几种模式的写法吧一.基本模式 var person = new Object(); person.name = "孙悟空"; person.weapon = "棒子"; person.run = function () { return this.name + "武器是" + person.weapon; } 二.工厂模
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 这种方式使用同
JavaScript事件方法(实例讲解)

废话不多说,直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text
JavaScript数组方法实例详解

目录简介创建数组创建方法详解方法大全 join() push()和 pop() shift() 和 unshift() sort() reverse() concat() slice() splice() indexOf()和 lastIndexOf() forEach() map() filter() fill() (ES6 新增) every() some() includes() (ES7) reduce()和 reduceRight() toLocaleString() 和
JavaScript创建对象的方式小结(4种方式)

本文实例总结了JavaScript创建对象的方式.分享给大家供大家参考,具体如下: 潜意识里,JavaScript不能算是面向对象的语言,要算也只能说是趋向面向对象的一种语言,至少它不能很好的吻合面向对象最基本的三大特性(继承.封装.多态),当然有很多人就认为JavaScript是面向对象语言,好像也说得没错,因为面向对象也能在JavaScript中实现,比如说继承.封装吧也都可以在JavaScript中实现,但是实现方便吗?所以我觉得很疑惑.看到网上有一网友评价的很好,"面向对象只是一种思想,
javascript设置文本框光标的方法实例小结

本文实例总结了javascript设置文本框光标的方法.分享给大家供大家参考,具体如下: 对于text //得到光标位置 function getCaret(textbox) { var control = document.activeElement; textbox.focus(); var rang = document.selection.createRange(); rang.setEndPoint("StartToStart",textbox.createTextRange
JavaScript代码调试方法实例小结

本文实例讲述了JavaScript代码调试方法.分享给大家供大家参考,具体如下: 1 把消息记录到控制台 IE8.Firefox.Chrome 和 Safari 中可以使用 console 对象向 JavaScript 控制台写入消息,它有这些方法: error(message):错误性消息. info(message):信息性消息. log(message):一般性消息. warn(message):警告性消息. Opera 10.5 之前的版本,是使用 opera.postError() 方
javascript编程异常处理实例小结

本文实例总结了javascript编程异常处理的方法.分享给大家供大家参考,具体如下: 前言:在前一篇<asp.net开发中常见公共捕获异常方式总结>,我们整理总结了asp.net服务端的异常处理.这一篇接着前文,简单总结并讨论一下javascript在客户端的异常处理.这样asp.net的服务端和客户端异常处理我们就都有了初步的认识. 1.烦人的脚本错误楼猪经常装13,但是普遍都没有深度.偶然艰难地看懂了一段英文,终于可以深沉地再装一回: When browsing Web pages o
ASP.NET动态增加HTML元素的方法实例小结

本文实例讲述了ASP.NET动态增加HTML元素的方法.分享给大家供大家参考,具体如下: 在使用asp.net进行web开发的时候页面中的<head></head>中的信息可以通过asp.net的cs文件动态指定. 1.动态增加样式表 /*动态增加样式表*/ HtmlLink link = new HtmlLink(); link.Attributes.Add("type", "text/css"); link.Attributes.Add(
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】

本文实例总结了JS表单验证方法.分享给大家供大家参考,具体如下: 回回写表单,回回要写不同的检查JS,很麻烦,后来写了通用的检查函数,很粗糙,但比较实用,以后再好好改改: 包含页: Check-Form.js 代码如下: //规则检查排序 function RegCheck(objs) { var str = objs.checktype; switch (str) { case "cn" : //要检查的表单控件的输入类型必须为中文 return CnWordRegCheck(obj
JS中数组与对象的遍历方法实例小结

本文实例讲述了JS中数组与对象的遍历方法.分享给大家供大家参考,具体如下: 一.数组的遍历: 首先定义一个数组 arr=['snow','bran','king','nightking']; 1.for循环,需要知道数组的长度; 2.foreach,没有返回值,可以不知道数组长度: arr.forEach(function(ele,index){ console.log(index); console.log(ele) }) 3.map函数,遍历数组每个元素,并回调操作,需要返回值,返回值组成新

JavaScript创建对象方法实例小结

相关推荐

随机推荐