JavaScript创建对象的写法_javascript技巧

对象是什么
从JavaScript定义上讲对象是无序属性的集合,其属性可以包含基本值、对象或函数。也就是说对象是一组没有特定顺序的属性,每个属性会映射到一个值上,是一组键值对,值可以是数据或对象。

最简单的对象
JavaScript的一对花括号{}就可以定义一个对象,这样的写法实际上和调用Object的构造函数一样

复制代码 代码如下:

var obj={};
var obj2=new Object();

这样构建出来的对象仅仅包含一个指向Object的prototype的指针,可以使用一些valueOf、hasQwnProperty等方法,没有多大实际作用,自定义对象嘛总要有一些自定义的属性、方法神马的。

复制代码 代码如下:

var obj={};
            obj.a=0;
            obj.fn=function(){
                alert(this);
            }

            var obj2={
                a:0,
                fn:function(){
                    alert(this);
                }
            }

可以在定义完对象后通过”.”为其添加属性和方法,也可以使用字面量赋值方法在定义对象的时候为其添加属性和方法,这样创建的对象,其方法和属性可以直接使用对象引用,类似于类的静态变量和静态函数,这样创建对象有一个明显缺陷——在定义大量对象的时候很费力,要一遍遍的写几乎是重复的代码。

抽象一下
既然是重复代码就可以抽象出来,用函数来做这些重复工作,在创建对象的时候调用一个专门创建对象的方法,对于不同的属性值只需要传入不同参数即可。

复制代码 代码如下:

function createObj(a,fn){
                var obj={};
                obj.a=a;
                obj.fn=fn;
                return obj;
            }

            var obj=createObj(2,function(){
                alert(this.a);
            });

这样在创建大量对象的时候,就可以通过调用此方法来做一些重复工作了,这种方式也不完美,因为在很多时候需要判断对象的类型,上面代码创建出来的对象都是最原始的Object对象实例,只是拓展了一些属性和方法。

有型一些

又是function登场的时候,JavaScript中function就是个对象,在创建对象的时候打可以抛开上面createObj方法,直接使用function作为对象,怎么实现复用呢,这就在于function作为对象的特殊性了。

1. function可以接受参数,可以根据参数来创建相同类型不同值的对象

2. function作为构造函数(通过new操作符调用)的时候会返回一个对象,在贫下中农版jQuery中提到过一些构造函数的基本知识,简单复制一下

构造函数的返回值分为两种情况,当function没有return语句或者return回一个基本类型(bool,int,string,undefined,null)的时候,返回new 创建的一个匿名对象,该对象即为函数实例;如果function体内return一个引用类型对象(Array,Function,Object等)时,该对象会覆盖new创建的匿名对象作为返回值。

3. 那么使用function怎么解决类型识别问题呢,每个function实例对象都会有一个constructor属性(也不是“有”,而是可以对应),这个属性就可以指示其构造是谁,也可以使用instanceof 操作符来做判断对象是否为XXX的实例。

不能光说不练,上代码

复制代码 代码如下:

function Person(name){
                this.name=name;
                this.fn=function(){
                    alert(this.name);
                }
            }

            var person1=new Person('Byron');

            console.log(person1.constructor==Person);//true
            console.log(person1 instanceof Person); //true

这样就完美了吧,也不是!虽然构造函数可以是对象有型,但对象的每个实例中的方法都要重复一遍!

复制代码 代码如下:

function Person(name){
                this.name=name;
                this.fn=function(){
                    alert(this.name);
                }
            }

            var person1=new Person('Byron');
            var person2=new Person('Frank');

            console.log(person1.fn==person2.fn);//false

看看看,虽然两个实例的fn一模一样,但是却不是一回事儿,这如果一个function对象有一千个方法,那么它的每个实例都要包含这些方法的copy,很让内存无语啊。

不玩儿虚的了

究竟有没有一种近乎完美的构造对象的方式,及不用做重复工作,又有型,对象通用方法又不必重复?其实可以发现使用function已经距离要求和接近了,只差那么一点儿——需要一个所有function对象的实例共享的容器,在这个容器内存发实例需要共享的属性和方法,正好这个容器是现成的——prototype,不了解prototype的同学可以看看JavaScript prototype

复制代码 代码如下:

function Person(name){
                this.name=name;
            }

            Person.prototype.share=[];

            Person.prototype.printName=function(){
                alert(this.name);
            }

            var person1=new Person('Byron');
            var person2=new Person('Frank');

            console.log(person1.printName==person2.printName);//true

这样每个Person的实例都有自己的属性name,又有所有实例共享的属性share和方法printName,基本问题都解决了,对于一般的对象处理就可以始终这个有型又有爱的创建对象模式了。

时间: 2024-10-16 05:31:52

JavaScript创建对象的写法_javascript技巧的相关文章

详解JavaScript的另类写法_javascript技巧

JavaScript 是属于网络的脚本语言! JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用. JavaScript 是因特网上最流行的脚本语言. JavaScript 很容易使用!你一定会喜欢它的! JavaScript一种解释型的脚本语言,语法灵活,让不同的人对同一个功能有很多种不同的写法.怎样组织JavaScript代码才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句"原来还可以这样写"呢? 匿名

JavaScript类的写法_javascript技巧

我们知道,在js中,是没有类的概念的.类的所有实例对象都从同一个原型对象上继承属性,因此,原型对象是类的核心. 类是对象的抽象,而对象是类的具体实例.类是抽象的,不占用内存,而对象是具体的,占用存储空间.---百度百科 早期的javascript需求都很简单,基本都是写成函数的,然后是面向过程的写法,后来慢慢的引入面向对象开发思想,再后来就慢慢写成类. 在js中,写成类的本质基本都是 构造函数+原型.下面,就讨论一下js类的几种写法: 构造函数法 /** * Person类:定义一个人,有nam

javascript 异常处理使用总结_javascript技巧

JavaScript中的异常可以用try..catch..finally语句来处理,也可以手动的来抛出异常. 1.使用try..catch..finally语句来处理异常 js代码在执行过程中如果出现异常,会手动创建一个异常类对象,该异常类对象将被提交给浏览器,这个过程称为"抛出异常".当浏览器接收到一场对象时,会寻找能处理这一异常的代码并把当前异常对象提交给其处理,这一过程被称为"捕获异常".try..catch..finally语句的基本语法格式为: 复制代码

浅析创建javascript对象的方法_javascript技巧

一.工厂模式 function person (name,age) { var p=new Object(); p.name=name; p.age=age; p.showMessage=function(){ console.log("name:"+this.name+" age:"+this.age); } return p; } var p1=person("k1",28); var p2=person("k2",29)

web性能优化之javascript性能调优_javascript技巧

JavaScript 是一个比较完善的前端开发语言,在现今的 web 开发中应用非常广泛,尤其是对 Web 2.0 的应用.随着 Web 2.0 越来越流行的今天,我们会发现:在我们的 web 应用项目中,会有大量的 JavaScript 代码,并且以后会越来越多.JavaScript 作为一个解释执行的语言,以及它的单线程机制,决定了性能问题是 JavaScript 的软肋,也是 web 软件工程师们在写 JavaScript 需要高度重视的一个问题,尤其是针对 Web 2.0 的应用.绝大多

纯javascript实现自动发送邮件_javascript技巧

描述: 此JavaScript将帮助你的电子邮件的人.只要按一下电子邮件,有人!和JavaScript会要求的电子邮件地址,主题,等等然后你,新的邮件,是向你打开了. <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function mailsome1(){ who=prompt("Enter recipient's email address: ","antispammer@earthling.net

JavaScript 三种不同位置代码的写法_javascript技巧

下面列举在三种不同的地方写JavaScript代码,实现的效果都是点击按钮button弹出alert警告框 第一种是最常见的,代码如下 html代码 <input type="button" value="按钮1" id="btn1" onclick="pop()"> js代码 function pop() { alert("在JavaScript函数处调用"); } 第二种是最简单的实现方式,

使用JavaScript switch case 另类写法_javascript技巧

习惯了C#的语法,遇到多分支调用的情况,除了最简单的if-else,那么就是switch-case了,所以使用JavaScript的时候就很容易会写出下面这样的代码: 复制代码 代码如下: // JScript source code //something的值是1.2.3... switch (something) { case 1: todoA(); break; case 2: todoB(); break; case 3: todoC(); break; //... } 这样的代码本身也

JavaScript立即执行函数的三种不同写法_javascript技巧

第一种: (function () { // open IIFE // inside IIFE }()); // close IIFE 第二种: !function () { // open IIFE // inside IIFE }(); // close IIFE 第三种: void function () { // open IIFE // inside IIFE }(); // close IIFE 以上是小编为您精心准备的的内容,在的博客.问答.公众号.人物.课程等栏目也有的相关内容,