javascript学习笔记3——创建对象

本文主要是对《JavaScript高级程序设计》第六章(面向对象的程序设计)的总结,书上的这章至少看了4遍是有的。该章主要讲对象的创建与继承。其中创建对象和继承方式至少6种,再加上一些方法属性,很容易搞得晕头转向的。因此有必要对本章的内容理一理,以后忘了也好过来看一看。

由于文章长度的限制,本文主要讲创建对象。

1创建对象

1.1 一般方法

使用Object或者采用对象字面量的方法。

1 var o = {a: 1};
2 var o2=new Object();
3       o2.a=1;

缺点:使用同一个接口创建很多对象,会产生大量重复的代码。

1.2工厂模式

function parent(name,age){
    var  Child = new Object();
    Child.name=name;
    Child.age=age;
    Child.sayHi=function(){
        console.log("Hi");
    }
    return Child;
};  

var x = Parent("Tom",12);
    console.log(x.name);  //Tom
    x.sayHi();  //Hi

函数parent能够根据接受的参数来构建一个包含所有必要信息的child对象。可以无限次调用这个函数,都会返回一个包含两个属性和一个方法的对象。

解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型)。

1.3构造函数模式

对于构造函数这个名字,学过java或者c++的同学应该都是知道的,在js里也是差不多的。

用构造函数将上面的例子重写如下:

function Parent(name,age){
    this.name=name;
    this.age=age;
    this.sayHi=function(){
        console.log("Hi");
    };
}

var x = new Parent("Tom",12);
    console.log(x.name);  //Tom
    x.sayHi();  //Hi

对于构造函数,我们需要在调用的时候加关键字 new。要注意的是,构造函数始终是以一个大写字母开头,而非构造函数始终是以一个小写字母开头。

与工厂模式相比,主要有以下几个不同之处:

  • 没有显示地创建对象;
  • 直接将属性和方法赋给了this对象;
  • 没有return语句。

缺点:使用构造函数的缺点就是每个方法都需要在每个实例上重新创建一遍。

1.4原型模式

我们创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性与方法。使用原型对象的好处是可以让所有的对象实例共享其包含的属性与方法。

function Parent(name,age){
    Parent.prototype.name=name;
    Parent.prototype.age=age;
    Parent.prototype.sayHi=function(){
        console.log("Hi");
    };
}

var x = new Parent("Tom",12);
    console.log(x.name);  //Tom
    x.sayHi();  //Hi

缺点:优点就是其缺点,方法属性都可以共享。具体可以看下面这个例子

function Parent(name,age){
    Parent.prototype.name=name;
    Parent.prototype.age=age;
    Parent.prototype.arr=["123","we"];
    Parent.prototype.sayHi=function(){
        console.log("Hi");
    };
}

var x = new Parent("Tom",12);
var y = new Parent("Tom1",12); 

    x.arr.push("x");
    y.arr.push("y"); 

    console.log(x.arr);//["123", "we", "x", "y"]
    console.log(y.arr);//["123", "we", "x", "y"]

对象x修改自己的属性,竟然会影响到y对象;同理,对y也一样。这个明显就很不合理啊,太可怕了!

1.5组合使用构造函数模式和原型模式

function Parent(name,age){   //只把属性留在这里定义,方法放在原型对象中
    this.name=name;
    this.age=age;
}

//第一种方式
Parent.prototype.sayHi=function(){
    console.log("Hi");
};   

//第二种方式
//由于采用对象字面量,因此必须修正其constructor属性;
Parent.prototype={
    constructor:Parent,
    sayHi:function(){
        console.log("Hi");
    }
}

var x = new Parent("Tom",12);
    console.log(x.name);  //Tom
    x.sayHi();  //Hi

在这个例子中,实例属性都是在构造函数中定义的,而由所有实例共享的属性constructor和方法则是在原型中定义的。

是目前使用最广泛、认同度最高的一种创建自定义类型的方法。

--------------------------感觉后面几种方法有些变态了--------------------------------

1.6 动态原型模式

function Parent(name,age){
    this.name=name;
    this.age=age;
    if( typeof this.sayHi !="function"){
        Parent.prototype.sayHi=function(){
            console.log("Hi");
        };
    }
}

var x = new Parent("Tom",12);
    console.log(x.name);  //Tom
    x.sayHi();  //Hi

先检查某个应该存在方法是否有效再来决定是否需要初始化原型。

1.7寄生构造函数模式

当前面几种都不适用的情况下,可以使用寄生构造函数模式。这种函数的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象。

function parent(name,age){
    var  Child = new Object();
    Child.name=name;
    Child.age=age;
    Child.sayHi=function(){
        console.log("Hi");
    }
    return Child;
};  

var x = Parent("Tom",12);
    console.log(x.name);  //Tom
    x.sayHi();  //Hi

但是其实就是和工厂模式一模一样,你TM在逗我吗?????

1.8稳妥构造函数模式

稳妥构造函数遵循与寄生构造函数模式类似的模式,但有两点不同:一是新创建对象的实例方法不引用this; 二是不使用new操作调用构造函数。

function Parent(name,age){
    var o=new Object();   //私有变量或者方法
    var name=name,
        age=age;
    o.sayName=function(){      //name前面没有this
        console.log(name+" "+age)
    }
    return o;
}

var x = Parent("Tom",12);
    x.sayName();  //Tom 12

变量x中保存的是一个稳妥对象,而除了调用sayName()方法外,没有别的方式可以访问其数据成员。

时间: 2024-10-31 11:22:35

javascript学习笔记3——创建对象的相关文章

javascript学习笔记---ECMAScript语法(引用类型)

引用类型通常叫做类(class). 本教程会讨论大量的 ECMAScript 预定义引用类型. 引用类型 引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象. 本教程会讨论大量的 ECMAScript 预定义引用类型. 从现在起,将重点讨论与已经讨论过的原始类型紧密相关的引用类型. 注意:从传统意义上来说,ECMAScript 并不真正具有类.事实上,除了说明不存在类,在 ECMA-262 中根本没有出现"类"这个词.ECMAScript 定义了"对象定

javascript学习笔记---ECMAScriptECMAScript 对象----定义类或对象

使用预定义对象只是面向对象语言的能力的一部分,它真正强大之处在于能够创建自己专用的类和对象. ECMAScript 拥有很多创建对象或类的方法. 原始的方式 因为对象的属性可以在对象创建后动态定义(后绑定),类似下面的代码: var oCar = new Object; oCar.color = "blue"; oCar.doors = 4; oCar.mpg = 25; oCar.showColor = function() { alert(this.color); };不过这里有一

javascript学习笔记---ECMAScriptECMAScript 对象----修改对象

通过使用 ECMAScript,不仅可以创建对象,还可以修改已有对象的行为. prototype 属性不仅可以定义构造函数的属性和方法,还可以为本地对象添加属性和方法. 创建新方法 通过已有的方法创建新方法Number.prototype.toHexString = function() { return this.toString(16); }; 在此环境中,关键字 this 指向 Number 的实例,因此可完全访问 Number 的所有方法.有了这段代码,可实现下面的操作: var iNu

JavaScript学习笔记【2】表达式和运算符、语句、对象

笔记来自<JavaScript权威指南(第六版)> 包含的内容: 表达式和运算符 语句 对象 表达式和运算符 数组直接量中的列表逗号之间的元素可以省略,这时省略的空位会填充值undefined.元素列表末尾可以留下单个逗号,这时并不会创建一个新的值为undefined元素. 属性访问表达式,.identifier的写法只适用于要访问的属性名称是合法的标识符,并且需要知道要访问的属性的名字.如果属性名称是一个保留字或者包含空格和标识符,或是一个数字(对于数组来说),则必须使用方括号的写法.当属性

javascript学习笔记------概念相关

javascript中的函数.对象 1. 在javascript中,函数是被当成一种数据类型,它可以被存储在一个变量.数组.对象中,可以被当作参数传递到另一个函数中. 函数就像是字符串和数字这样的的数据类型,它可以是其它对象的一个属性 2. 函数定义的三种方式: function square(x) {   return x*x;   }    //function 语句 var square = function(x) { return x*x;}  //函数直接量  function lit

Javascript 学习笔记 2: 标识语句

可以在任何语句声明之前使用唯一标识(identifier)和冒号(:)用来标记该语句: identifier: statement 这样,你可以在程序的任何其他地方通过标识来使用这个语句.即使在语句内部也可以使用该语句的标识(例如:循环语句和条件语句).当在一个循环语句前添加一个标识,你可以在语句内部通过break 标识来退出当前循环,也可以通过continue标识来继续执行该语句.例如: mainloop: while(token != null) { // Code omitted... c

javascript学习笔记---ECMAScript-判断变量类型

判断类型之前,先要清楚有哪些类型. (理理思路:程序由数据和方法构成,数据由简单数据和复杂数据构成) 即类型有: 数据(简单数据:boolean,string,num,undefined,null.复杂数据:object), 方法(function) 万能的typeof,神一样的方法 typeof(1);// num typeof("hello");// string   typeof(false);// boolean var vFlag; typeof(vFlag);// unde

javascript学习笔记——如何修改&lt;a href=&quot;#&quot;&gt;url name&lt;/a&gt;

0.前言 使用了一段时间javascript,再花了点时间学习了jquery,但是总是感觉自己很"迷糊",例如<a href="#">url name</a>中,如果修改href中的"#"应如何编写代码,如果修改url name应如何编写代码.再加上javascript和jquery操作方法略有不同,所以我就更"迷糊"了. [说明] 曾经使用关键词--"innerHTML和value区别&qu

javascript学习笔记---ECMAScript语法(辅助)

1.区分大小写. test与Test变量是两个不同的变量 2.变量是弱变量. 与C,java等等语言变量不是很一样. 如下java代码 ? 1 2 3 4 int i =0; //再次赋值 i = 10;//ok i = "hello";//wrong 类型不匹配 javascript ? 1 2 3 4 var i = 9; //再次赋值 i = 10;//ok i = "hello";//ok 但是不建议这么干,如此会给开发造成干扰,不明确变量的类型.(变量命名