论坛首页 编程语言技术论坛

Javascript对象封装的三种简单写法

浏览 13013 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (4) :: 隐藏帖 (0)
作者 正文
   发表时间:2012-11-11   最后修改:2013-09-01

  这里的内容没有太多深入的东西,更深的理解请看秘 密花园javascript中创建对象的各种模式 。

 

  Javascript在HTML中变得越来越强大,富客户端,HTML5中的WebGL等。但是我们书写Javascript的时候往往很随意,使用对象的封装是极好的。这里介绍Javascipt三种创建对象的方法。

  使用关键字new创建对象

 

 
function Person(name, age) { 
  this.name = name;
  this.age = age;
}
var p = new Person();   // 也可填充初始化属性,如new Person("lingceng", 22) 

 

 使用Object直接创建对象

 可以看出,这种方法扩展很方便。

 

 
var obj = new Object(); // 这里也可写成 var = {};
obj.name = "lingceng";
obj.age = 22;

 

 使用JSON创建(对象字面量的说法更准确,但JSON更好理解)

 从Javascript1.2开始,创建对象有了更快捷的方式。

 

var p = {
  name: "lingceng",  // "name":"lingceng这样加引号解析方式相同
  gender: "male"
};

 

实践方式

    结合构造函数和原型模式创建对象的方式很适合实践。

 

 

function Person(name,age)
{
	// 实例属性
	// 实例时多份拷贝
	this.name=name;
	this.age=age;
}
        
Person.prototype={
        // http://developer.51cto.com/art/200907/134913.htm
        //constructor属性始终指向创建当前对象的构造函数
       	// 因为原型被替换,所以需要恢复construtor的默认指向
	constructor: Person,
	showName:function(){
		alert("ShowName in prototype:"+this.name);
	},
	showAge:function(){
		alert(this.age);
	}
}

var p =  new Person("lingceng", 22);
p.showAge(); // 22
   发表时间:2012-11-12  
当挂载的是一个方法时 还可以这样:

var persion = {
ShowName:function(){
   alert("");
},
ShowAge:function(){
   alert("");
}
}
0 请登录后投票
   发表时间:2012-11-12  
最后一个person

person.prototype.constructor = person;

别忘了
0 请登录后投票
   发表时间:2012-11-12  
cectsky 写道
当挂载的是一个方法时 还可以这样:

var persion = {
ShowName:function(){
   alert("");
},
ShowAge:function(){
   alert("");
}
}


这样的写法似乎不能达到只有一份拷贝
0 请登录后投票
   发表时间:2012-11-12  
witcheryne 写道
最后一个person

person.prototype.constructor = person;

别忘了

不解。。
0 请登录后投票
   发表时间:2012-11-12  
还可以这样
function Person(name) {
this.name
}

var p = new Person();
var p2 = new p.constructor();
0 请登录后投票
   发表时间:2012-11-13  
lingceng 写道
witcheryne 写道
最后一个person

person.prototype.constructor = person;

别忘了

不解。。


试试这段代码:
function Empty(name) {
    
}

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

Person.prototype = {
    say: function() {
        console.log('I am ' + this.name);
    }
}
    
var p = new Person('witty_lv');
p.say(); // => I am witty_lv
console.log(p.constructor); // => Object

Person.prototype.constructor = Empty;

var e = new Person('lvjian');
e.say(); // => I am lvjian
console.log(e.constructor);// function Empty


Person.prototype.constructor = Person;

var pp = new Person('witcheryne');
console.log(pp.constructor);// function Person



方法调用上没什么问题, 在继承方面估计会有问题。
空了再研究
0 请登录后投票
   发表时间:2012-11-13  
毫不犹豫的投了新手帖。
一是出现了《疯狂的AJAX讲义》,感觉不对劲。

2是,能不能整点有技术含量的,比如新的Object.create,defineProperty方法等。
讲烂了的东西还拿出来讲。

另外,“使用JSON语法创建”说法是不正确的。这在JS中称为Object字面量(Literal)。和JSON是不同的东西。属性名称不用加引号
0 请登录后投票
   发表时间:2012-11-14  
witcheryne 写道


var e = new Person('lvjian');
e.say(); // => I am lvjian
console.log(e.constructor);// function Empty


这里肯定是为空的,construtor又没有定义。。
0 请登录后投票
   发表时间:2012-11-14  
jamcode 写道
毫不犹豫的投了新手帖。
一是出现了《疯狂的AJAX讲义》,感觉不对劲。

2是,能不能整点有技术含量的,比如新的Object.create,defineProperty方法等。
讲烂了的东西还拿出来讲。

另外,“使用JSON语法创建”说法是不正确的。这在JS中称为Object字面量(Literal)。和JSON是不同的东西。属性名称不用加引号

  理解你说的不对劲的意思,我也不看好这类速成傻瓜书籍,但作者辛苦总结,也帮助了很多初学者。就像回想谭浩强老先生的C语言,虽然写得很糟糕,却是当时启蒙书籍呀。保持开放心态,keep your mind wide open.
  关于新的东西,谢谢提点。
0 请登录后投票
论坛首页 编程语言技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics