`

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

阅读更多

 

  这里的内容没有太多深入的东西,更深的理解请看秘 密花园与 在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={
	// 因为原型被替换,所以需要恢复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
分享到:
评论

相关推荐

    javaScript封装的各种写法

    主要介绍了javaScript封装的各种写法,通过列举优缺点和使用场景详细介绍了几种封装的格式,需要的朋友可以参考下

    基于百度地图JavaScript API封装的React组件库

    所以这里面地图相关的dom并不是react渲染的,真正创建地图之类的还是使用百度地图JavaScript Api,React-BMap只是利用了React组件的写法来封装百度地图JavaScript Api,使我们在使用React的时候能更方便的使用百度...

    javaScript中封装的各种写法示例(推荐)

    通常写js组件开发的,都会用到匿名函数的写法去封装一个对象,与外界形成一个闭包的作用域。(这里对于js的继承,多态,我就不多说了,高级程序员应该具备这些知识,如果您也做过java开发,这个概念太熟悉了。 ) ...

    JavaScript模拟实现封装的三种方式及写法区别

    JS是一门面向对象语言,其对象是用prototype属性来模拟的。下面通过本文来了解下js模拟实现封装的三种方法,需要的朋友参考下吧

    【JavaScript源代码】JavaScript中BOM和DOM详解.docx

    JavaScript中BOM和DOM详解  目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 ...兼容性写法,封装工具  BOM(浏览器对象模型)  1. window 获取浏览器c窗口尺寸 2

    javascript核心基础

    详细介绍的javascript的核心技术:如javascript的对象编程 闭包 封装 继承 类的多种写法

    eros是基于weex封装面向前端的vue写法的解决方案

    eros 是基于 weex 封装面向前端的 vue 写法的解决方案,由于 app 开发的特殊性,eros 则更偏重关心于整个 app 项目。

    javascript 核心基础

    详细介绍的javascript的核心技术:如javascript的对象编程 闭包 封装 继承 类的多种写法

    JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载

    JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载 以前对于JavaScript总是在用到的时候在页面上写几个函数,基本没考虑到函数的封装与重用,最近有个项目可能对于这方面要求有点高,所以就研究了下类似...

    react-bmap:基于百度地图JavaScript API封装的React组件库

    所以这里面地图相关的dom并不是react渲染的,真正创建地图之类的还是使用百度地图JavaScript Api,React-BMap只是利用了React组件的写法来封装百度地图JavaScript Api,使我们在使用React的时候能更方便的使用百度...

    vue写法-使用js高阶函数实现多条件搜索功能

    这个区别要细说可太多了,但是最终都能归为语法不同,封装方式不同,但本质一样,都是基于JavaScript的两种不同框架语言(相当于龙生九子,各有不同)。 那么vue呢? 之前用react写法实现前端搜索功能时,我们是从...

    javascript的函数、创建对象、封装、属性和方法、继承

    一,function 从一开始接触到js就感觉好灵活,每个人的写法都不一样,比如一个function就有N种写法 如:function showMsg(){},var showMsg=function(){},showMsg=function(){} 似乎没有什么区别,都是一样的嘛,真...

    【JavaScript源代码】vue3.0实现复选框组件的封装.docx

    vue3.0实现复选框组件的封装  本文实例为大家分享了vue3.0实现复选框组件封装的具体代码,供大家参考,具体内容如下 大致步骤:  实现组件本身的选中与不选中效果 实现组件的v-model指令 改造成 @vueuse/core ...

    JavaScript面向对象分层思维全面解析

    但在javascript里面多态的概念是不存在,而继承由于web页面的必须先下载js在运行导致js的继承不能像后台那么灵活而且js没有重载以及重写不方便(而且js中重写的意义不是很大),所以在js中很少用到面向对象,可能在一些...

    Javascript匿名函数的一种应用 代码封装

    在一些Javascript库中可以看见这种写法: 代码如下: (function(){ //所有库代码代码 })(); 说实话,对于js初学者的我来说。这个东西太吓人了,在这些JS库中,这个函数基本上把整个库的所有代码全括起来了,这种写法...

Global site tag (gtag.js) - Google Analytics