js 创建方法

贴个代码先: 
function O(user,pwd){ //use constructor 
this.user=user; 
this.pwd=pwd; 
this.get=get; 
return this; 

function O2(user,pwd){ //use factory 
var obj=new Object(); 
obj.user=user; 
obj.pwd=pwd; 
obj.get=get; 
return obj; 

function O3(){ //use prototype 

O3.prototype.user=‘abc‘; 
O3.prototype.pwd=‘dis‘; 
// O3.propotype.get=‘get‘; 
//O3.prototype.get(){ 
//alert(this.pwd); 
//} 
function O4(user,pwd){ 
this.user=user; 
this.pwd=pwd; 
return this; 

O4.prototype.get=function(){alert(‘123‘);}

//function get(){ 
//alert("This User:"+this.user); 
// } 
function test2(){ 
//var a=new O2(‘Us‘,‘Pw‘); use factory & constructor 
//var a=new O3(); //use prototype 
//a.get(); 
var a=new O4(‘*U4‘,‘P4‘); //混合 
//a.user=‘Not ABC‘; //set new property 
//alert(a.user); 
a.get(); 

常用的MS 就这几种,可能还有其它的.碰到再说吧.... 
题外话:昨天手欠,试图用alert(window.appName)到ff之下去查看浏览器版本,结果弹出的竟然是Netscape,咋不是 firefox。继而又跑去chrome下试验,又一次弹出了Netscape。baidu搜 Netscape 竟然发现js就出自Netscape公司。惭愧啊惭愧!!!研究了这么久的js都不认识祖师爷。于是又跑去找了找族谱,原来js出自Brendan Eich之手,95年他创造js时候,也不过就31岁。哎呀,真是白活了,如他一般老的我,到现在都学不会js,真是人比人气死人。。js当初设计的时候,没有想到自己能从一部打电话用的手机变成集拍照,上网,游戏,电话于一身的智能机。真是造化弄人!!!也许各中的神奇,连Brendan Eich本人都没有想到。应该说Brendan Eich创造了js,而一大批的js牛人成就了今天如此复杂的js。 
js不是木有类么?没关系,人家不是设计了原型属性么~ 
js不是木有块级作用域么?没关系,人家不是有作用域链么~ 
js怎样实现成员变量私有化?哦,用闭包解决吧~ 
哦,这么多基本概念,彻底的晕掉了,路漫漫其修远兮。 
言归正传,本文讨论几种js创建对象的方法,先从最好理解的工厂模式开始:

复制代码代码如下:

function createPerson(name,age,job){ 
var o = {}; 
o.name = name; 
o.age = age; 
o.job = job; 
o.sayName = function(){ 
alert(this.name); 
}; 
return o; 

var tanya = createPerson("tanya","30","female"); 
var ansel = createPerson("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName();

这里先定义o为一个空的对象,然后为o设置了一堆属性。其实也可以直接给o属性的嘛,所以如果这样写也是ok的。

复制代码代码如下:

function createPerson(name,age,job){ 
var o = { 
name : name, 
age : age, 
job : job, 
sayName : function(){ 
alert(this.name); 

}; 
return o; 

var tanya = createPerson("tanya","30","female"); 
var ansel = createPerson("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName();

还有一种办法是利用无敌的this,因为this就表示当前运行时的对象,将构造函数this的作用域指向新对象,将当前运行对象的属性和方法都赋给新对象,这样对象模式称为构造函数模式

复制代码代码如下:

function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = function(){ 
alert(this.name); 
}; 

var tanya = new Person("tanya","30","female"); 
var ansel = new Person("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName();

在这个例子中,tanya和ansel都有一个constructor属性,该属性指向person。 
考虑一下如下的情况:

复制代码代码如下:

function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = function(){ 
alert(this.name); 
}; 

Person("tanya","30","female"); 
Person("ansel","30","male"); 
window.sayName(); 
window.sayName();

发现两次弹出的都是ansel,这是因为不用new的话,就不是一个person的实例,而仅仅在执行函数。而在全局作用域调用一个函数时this总是指向Global对象。而Global对象在浏览器中就是window对象。 
我们还可以用构造模式在另外一个对象中调用sayName方法,还记得Apply和call么,来吧再考虑另外一种情况,

复制代码代码如下:

function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = function(){ 
alert(this.name); 
}; 

var olivia = {}; 
Person.call(olivia,"tanya","30","female"); 
olivia.sayName(); 
var philip = {} 
Person.apply(philip,["ansel","30","male"]); 
philip.sayName();

原型模式就要考虑原型链了,分析一下,sayName方法在实例中被重复定义了两次,但其实没有必要创造两个一样的副本。使用原型方法,可以使是tanya和ansel的共享一个sayName方法。 
于是原型模式的写法如下:

复制代码代码如下:

function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 

Person.prototype.sayName= function(){ 
alert(this.name); 
}; 
var tanya = new Person("tanya","30","female"); 
var ansel = new Person("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName();

实际应用时,不是一成不变的套用某种模式,活学活用。需要共享方法的时候就用原型模式,需要使用副本的时候就用构造模式,还可以结合起来,把所有信息都封装在构造函数中,而通过在构造函数中初始化原型,使得对象保持了同时使用构造函数和原型的优点。

复制代码代码如下:

function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
if (typeof sayName != "function" ){ 
Person.prototype.sayName= function(){ 
alert(this.name); 
}; 


var tanya = new Person("tanya","30","female"); 
var ansel = new Person("ansel","30","male"); 
ansel.sayName = function () { 
alert("Hi ansel, how hansome you are!"); 

tanya.sayName(); 
ansel.sayName();

时间: 2024-10-31 06:52:33

js 创建方法的相关文章

JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children c)   . parentNode . children [索引] . children:获取所有子节点 opacity:0-1:透明度 alpha(opacity:百分数):IE6/7/8透明度 先绑定事件再进行循环 previousNode()上一个兄弟节点 alert(变量名)可测试变量名是否

JS创建函数的方法

JS创建函数的方法 JavaScript是通过关键字 function 来声明一个函数 一.命名函数 1.创建方法 function 函数名(参数1,参数2,参数3.......){    }2.示例        function fn1(){            console.log("命名函数");        } 二 .匿名函数 变量匿名函数1.定义方法var  变量名=function(参数1,参数2,........){  } 2.注意事项: 1.变量匿名函数可以设置

盈创动力之 JS校验方法

var IS_NULL = 128; // 10000000var IS_FULL = 64; // 01000000var IS_HALF = 32; // 00100000var IS_ASCII = 16; // 00010000var IS_NUM = 8; // 00001000var IS_DATE = 4; // 00000100var IS_PHONE = 2; // 00000010var IS_EMAIL = 1; // 00000001var IS_NOT_NULL = 0

Js apply 方法 具体解释

Js apply方法具体解释 我在一開始看到javascript的函数apply和call时,很的模糊,看也看不懂,近期在网上看到一些文章对apply方法和call的一些演示样例,总算是看的有点眉目了,在这里我做例如以下笔记,希望和大家分享..  如有什么不正确的或者说法不明白的地方希望读者多多提一些意见,以便共同提高.. 主要我是要解决一下几个问题: 1.        apply和call的差别在哪里 2.        什么情况下用apply,什么情况下用call 3.        ap

Node.js 创建HTTP服务器(经过测试,这篇文章是靠谱的T_T)

Node.js 创建HTTP服务器 如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器,并配上 mod_php5 模块和php-cgi. 从这个角度看,整个"接收 HTTP 请求并提供 Web 页面"的需求根本不需 要 PHP 来处理. 不过对 Node.js 来说,概念完全不一样了.使用 Node.js 时,我们不仅仅 在实现一个应用,同时还实现了整个 HTTP 服务器.事实上,我们的 Web 应用以及对应的 Web 服务器基本上是一样的.

node.js在windows下的学习笔记(5)---用NODE.JS创建服务器和客户端

//引入http模块 var http = require('http'); //调用http的createServer的方法,这个方法有一个回调函数,这个回调数 //的作用是没到那个有请求发送给服务器的时候,就执行这个回调函数 http.createServer(function (req, res) { //发送 res.end('Hello World\n'); }).listen(3000, "127.0.0.1");//端口和IP的绑定 console.log('Server

js创建元素

js创建多条数据,插入到页面中的方法. 方法一: 执行时间大概在35ms左右. 这个就属于使用字符串拼接之后,再一次性的插入到页面中.缺点是,容易导致事件难以绑定. 方法二: 执行时间不定,最少的在80ms左右,做多的达到了180ms左右. 这个方法是创建文档碎片保存需要插入的节点,然后一次性插入到页面中. 方法三: 执行时间基本维持在80ms左右. 这个方法就是每次创建节点之后,就立即插入到页面中,会频繁导致页面的reflow和repaint.不建议使用该方法进行DOM读写. 使用jquery

【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI

注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容. Part 5: Creating a Dynamic UI with Knockout.js 第5部分:用Knockout.js创建动态UI 本文引自:http://www.asp.net/web-api/overview/creating-web-apis/using-web-api-with-entity-framework/using-web-api-with-entity-fra

JS getAttribute方法的使用

getAttribute()方法 至此,我们已经向大家介绍了两种检索特定元素节点的办法:一种是使用getElementById()方法,另一种是使用getElementsByTagName()方法.在找到那个元素后,我们就可以利用getAttribute()方法把它的各种属性的值查询出来. getAttribute()方法是一个函数.它只有一个参数--你打算查询的属性的名字: object.getAttribute(attribute) 不过,getAttribute()方法不能通过docume