js定义对象
1.工厂模式
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();
2.构造函数模式
unction 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();
js定义对象的更多相关文章
- js定义对象的几种容易犯的错误
//js定义对象的几种容易犯的错误function Person() { getName = function (){ console.info(1); }; return this;}//Perso ...
- 【JS】#001 JS定义对象写法(原型、JSON方式)
下面主要写两种 JS 定义对象的 常用写法 写法1:[很像面向对象语言中的写法] function zhongxia(age) { this.age = age; } zhongxia.name = ...
- JS定义对象方法?
第一种:构造函数形式 把参数作为构造函数的参数传递,这样对于对象的初始化更灵活一点 <script language="javascript"><!-- /** ...
- js定义对象并赋值
1.可以通过 var ratio = {}; ratio.low = 70; ratio.high = 90; ratio.scale = 0.2; 2.可以通过 var obj = new Obj ...
- 认识JS的基础对象,定义对象的方法
JS的基础对象: 1.window //窗口对象 2.document //文档对象 3.document.documentElement //html对象 4.docume ...
- JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...
- JS笔记2 --定义对象
16.javascript中定义对象的几种方式(javascript中没有类的概念,只有对象): 1)基于已有对象扩充其属性和方法: var object = new Object(); object ...
- js定义类或对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript学习12 JS中定义对象的几种方式【转】
avaScript学习12 JS中定义对象的几种方式 转自: http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...
随机推荐
- 【Android】7.2 LinearLayout(线性布局)
分类:C#.Android.VS2015: 创建日期:2016-02-10 一.简介 LinearLayout将容器内的组件一个挨着一个地横向或纵向依次堆叠起来(不重叠).该布局和WPF的StackP ...
- css margin塌陷问题
一.同级块级元素塌陷 html <h2> 同级块级元素塌陷 </h2> <div class="block1"> block1 </div ...
- nyoj 504 课程设计
课程设计 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 新学期伊始,Gangster 老师又在为如何给学生分配课程设计题目而犯愁,Gangster老师老共有 N 名学生 ...
- 树形列表 jqtree数据 使用
jqtree调试笔记 用的是data-url的方式从远程加载的数据返回的数据格式须要是json,当然也可以使用text模式,但是恐怕要自己写格式的解析了 其中返回数据的时候,是在这个函数的末尾_loa ...
- 自己写bootloader(一)
bootloader功能目标:启动内核1.从Flash上把内核读入内存 1>读Flash: a.NORFLASH:读内存 b.NANDFLASH: 2>初始化内存(SDRA ...
- c++之——派生类的同名成员和函数调用方式及构造析构顺序
#include<iostream> using namespace std; class Object { public: Object(), b(), c() { cout <& ...
- SQL Injection绕过技巧
0x00 sql注入的原因 sql注入的原因,表面上说是因为 拼接字符串,构成sql语句,没有使用 sql语句预编译,绑定变量. 但是更深层次的原因是,将用户输入的字符串,当成了 "sql语 ...
- 起来吧!不要做奴隶的ITproject师们!
本文转自林忠信的博客: http://davylin.blog.163.com/blog/static/8138791201441465328380/ 起来吧! 不要做奴隶的ITproject师们! ...
- 按关键字搜索自己的CSDN博客
CSDN居然没有搜索自己博客的功能!如果博客写多了后将很难查找. 搜到的办法居然要靠谷歌... 在谷歌输入关键词,格式如下: <要检索的关键词> site:blog.csdn.net/&l ...
- 【WPF】设置ListBox容器Item的流式布局
需求:像下图那样显示把一组内容装入ListBox中显示.要求用WrapPanel横向布局,顺序如图中的数字. 问题:ListBox默认的布局是从上往下单列的,所以需要设置布局. <ListBox ...