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();

赞 (0)

相关推荐

  • JavaScript 创建对象

    第一种:JSON方式/对象直接量 格式: var 对象名 = { 变量1: 变量1的值, 变量1: 变量1的值, --, 函数1: function() { 函数体 }, 函数2: function() { 函数体 }//Note:最后的逗号要去除为了和IE兼容. }; 说明: (1) 大括号内直接填写变量或者函数: (2) 对象的内容与值以冒号分隔,成对出现: (3) 包含的变量或者函数之间以逗号分隔: (4) 函数需要写在function(){}的大括号之内. 例子: var 对象名 = {

  • js中创建对象的几种方式示例介绍

    JavaScript中的所有事物都是对象:字符串.数组.数值.函数等.JS中并没有类的概念, 但我们可以利用JS的语法特征,以类的思想来创建对象. 原始方法 复制代码 代码如下: <script type="text/javascript"> var obj = new Object(); obj.name = "Koji"; //为对象添加属性 obj.age = 21; obj.showName = function(){ //为对象添加方法 ale

  • C++用new创建对象和不用new创建对象的区别解析

    我们都知道C++中有三种创建对象的方法,如下: 复制代码 代码如下: #include <iostream>using namespace std; class A{private:    int n;public:    A(int m):n(m)    {    }    ~A(){}}; int main(){    A a(1);  //栈中分配    A b = A(1);  //栈中分配    A* c = new A(1);  //堆中分配 delete c;    return

  • 收集的比较全的automation服务器不能创建对象 异常原因和解决方法第1/2页

    1.automation服务器不能创建对象 只需要运行:regsvr32 scrrun.dll 就可以了 2.未将对象引用设置到对象的实例. 1.ViewState 对象为Unll. 2.DateSet 空. 3.sql语句或Datebase的原因导致DataReader空. 4.声明字符串变量时未赋空值就应用变量. 5.未用new初始化对象. 6.Session对象为空. 7.对控件赋文本值时,值不存在 8.使用Request.QueryString()时,所获取的对象不存在,或在值为空时未赋

  • 使用隐藏的new来创建对象

    很多时候我们是这样写类,然后使用new创建对象的. 复制代码 代码如下: function Person(name,age){ this.name=name; this.age=age; } Person.prototype={ setName : function(n){this.name=n;}, getName : function(){return this.name;} } var p = new Person('jack',25); 改成这样的 复制代码 代码如下: function

  • js创建对象的几种常用方式小结(推荐)

    第一种模式:工厂方式 复制代码 代码如下: var lev=function(){ return "我们"; }; function Parent(){ var Child = new Object(); Child.name="脚本"; Child.age="4"; Child.lev=lev; return Child; }; var x = Parent(); alert(x.name); alert(x.lev()); 说明: 1.在函数

  • JavaScript 三种创建对象的方法

    JavaScript中对象的创建有以下几种方式: (1)使用内置对象 (2)使用JSON符号 (3)自定义对象构造 一.使用内置对象 JavaScript可用的内置对象可分为两种: 1,JavaScript语言原生对象(语言级对象),如String.Object.Function等: 2,JavaScript运行期的宿主对象(环境宿主级对象),如window.document.body等. 我们所说的使用内置对象,是指通过JavaScript语言原生对象的构造方法,实例化出一个新的对象.如: 复

  • "automation服务器不能创建对象”的问题的解决方案总结大全

    本人工作中的应用系统都是jsp的,大量javascript程序,一旦出"automation服务器不能创建对象"问题,大量报表及查询无法保存,苦思冥 想.千尝万试,终于将其搞定,现将相关方案与大家共享.  1.如果是Scripting.FileSystemObject (FSO 文本文件读写)被关闭了,开启FSO功能即可,在"运行"中执行regsvr32 scrrun.dll即可 2.安全模式设置成"中",如果javascript脚本中报这个错误

  • JavaScript创建对象的七种方式全面总结

    JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产.接下来介绍七种非常经典的创建对象的方式,他们也各有优缺点 工厂模式 function createPerson(name, job) { var o = new Object() o.name = name o.job = job o.sayName = function() { console.log(this.name) } return

  • 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

  • js中常见的4种创建对象方式与优缺点

    目录 前言 1.工厂模式 2.构造函数模式 3.原型模式 4.Object.create() 其他模式 总结 前言 说起创建对象,最容易想到的便是通过对象字面量方式直接定义一个对象吧,但这种方式只能创建少量,单独且相互间无联系的对象.若要批量创建对象,该如何? 1.工厂模式 实现: function fn(a,b){ let obj = new Object() obj.a=a obj.b=b return obj } const test = fn(1,2) 优点:解决了创建多个类似对象的问题

  • js中常见的6种继承方式总结

    目录 前言 1.原型继承 2.盗用构造函数 3.组合继承 4.原型式继承 5.寄生式继承 6.寄生式组合继承 总结 前言 js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式 温馨提示:本文中Super函数都是指父类,Sub函数都是代表子类.同时文中会涉及到“构造函数模式”和“工厂模式”,如果不熟悉的小伙伴,可以先看看这篇介绍 js常见的4种创建对象方式. 1.原型继承 实现: fu

  • js定义类的几种方法(推荐)

    ECMAScript6已经支持了class,但之前版本都不支持类,但是可以通过一些方法来模拟类. js中的类,既是重点,也是难点,很多时候都感觉模棱两可. 首先强调一下js中很重要的3个知识点:this.prototype.constructor. 下面我们来总结一下定义(模拟)类的几种方法: 1.工厂模式 function createObject(name,age){ var obj = new Object(); obj.name = name; obj.age = age; obj.ge

  • JS实现上传图片的三种方法并实现预览图片功能

    JS实现上传图片的三种方法并实现预览图片功能

    在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持). 以下是实现上述思路的方法: 1. 模板文件 <!DOCTYPE html> <html l

  • JS创建事件的三种方法(实例代码)

    1.普通的定义方式 <input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色','红色',' 提示框 '); if(Sfont=='红色'){ form1.style.fontFamily='黑体'; form1.style.color='red'; }" /> 这是最常见的一种定义方式,直接将JS事件定义在需要的

  • 跟我学习javascript创建对象(类)的8种方法

    8中javascript创建对象(类)的方法,依依介绍给大家,希望大家喜欢. 1. 使用Object构造函数来创建一个对象 下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object(); person.name="kevin"; person.age=31; alert(person.name); alert(person["name"]) 上述写法的另外一种表现形式是使用对象字面量创建一个对象,不要

  • JS数组去重的6种方法完整实例

    JS数组去重的6种方法完整实例

    本文实例讲述了JS数组去重的6种方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net 数组去重</title> </head> <body> <script> //1.filter:(indexOf)方法创建一个新的数组,新数组中的元素是通过检查指定

  • js数组去重的N种方法(小结)

    对于数组去重我们有n种方法可以实现. es5实现方法 for循环+indexOf function unique(arr) { var uniqueArr = [], len = arr.length for (var i = 0; i < len; i++) { if (uniqueArr.indexOf(arr[i]) == -1) { uniqueArr.push(arr[i]) } } return uniqueArr } var arr = [1, 2, 3, 1, 5, "1&

  • js数组去重的11种方法

    在实际工作或面试中,我们经常会遇到"数组去重"问题,接下来就是使用js实现的数组去重的多种方法: 1.将数组的每一个元素依次与其他元素做比较,发现重复元素,删除 var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5]; console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5, 5] function noRepeat1(arr) { for(var i = 0;

随机推荐