JavaScript对象 创建对象(一)
创建对象 --以下内容来自JavaScript高级程序设计
工厂模式
用函数来封装以特定接口创建对象的细节。
function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson("Nicholas", , "Software Engineer");
var person2 = createPerson("Greg", , "Doctor");
person1.sayName(); //"Nicholas"
person2.sayName(); //"Greg"
构造函数
用来创建特定类型的对象
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.sayName(); //"Nicholas"
person2.sayName(); //"Greg"
alert(person1 instanceof Object); //true
alert(person1 instanceof Person); //true
alert(person2 instanceof Object); //true
alert(person2 instanceof Person); //true
alert(person1.constructor == Person); //true
alert(person2.constructor == Person); //true
//不同实例的同名函数是不相等的,每个方法都要在每个实例上重新创建一次。
alert(person1.sayName == person2.sayName); //false
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}
//把函数定义转移到构造函数外部,作为全局函数,没有封装性
function sayName(){
alert(this.name);
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.sayName(); //"Nicholas"
person2.sayName(); //"Greg"
alert(person1 instanceof Object); //true
alert(person1 instanceof Person); //true
alert(person2 instanceof Object); //true
alert(person2 instanceof Person); //true
alert(person1.constructor == Person); //true
alert(person2.constructor == Person); //true
alert(person1.sayName == person2.sayName); //true
原型模式
每个函数都有一个原型属性,它指向一个对象,这个对象包含由特定类型实例共享的属性和方法。使用原型对象可以使所有对象实例共享它所包含的属性和方法。
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true
alert(Person.prototype.isPrototypeOf(person1)); //true
alert(Person.prototype.isPrototypeOf(person2)); //true
//only works if Object.getPrototypeOf() is available
if (Object.getPrototypeOf){
alert(Object.getPrototypeOf(person1) == Person.prototype); //true
alert(Object.getPrototypeOf(person1).name); //"Nicholas"
}
alert(Person.prototype.constructor == Person); //true
in操作符:当对象能够访问给定的属性时,返回true,不论改属性在实例还是原型中。hasOwnProperty()只针对对象实例。自定义hasPrototypeProperty()监测原型对象中的属性。
function hasPrototypeProperty(object, name){
return !object.hasOwnProperty(name) && (name in object);
}
不是所有的属性都是可枚举的 ECMAScript5中constructor和prototype都是不可枚举的。Object.keys()可以取得对象的上所有可枚举的属性。
function Person() {
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function () {
alert(this.name);
};
var keys = Object.keys(Person.prototype);
alert(keys); //"name,age,job,sayName"
//返回所有属性
var k0 = Object.getOwnPropertyNames(Person.prototype);
alert(k0); //"constructor,name,age,job,sayName"
var person1 = new Person();
person1.name = "yuansong";
person1.age = 28;
var k1 = Object.keys(person1);
alert(k1);//"name,age"
原型的动态性
尽管我们可以随时的为原型添加属性和方法,并且修改能够立即在所有对象实例中反应出来,但是重写整个原型对象就不一样了。
function Person(){
}
var friend = new Person();
Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
sayName : function () {
alert(this.name);
}
};
friend.sayName(); //error
原型对象的问题
原型对象中的所有属性是被很多实例共享的,这对于包含原始类型值的属性没有影响,但对于包含引用类型值得属性来说,比较问题就严重了。。。
function Person(){
}
Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
friends : ["Shelby", "Court"],
sayName : function () {
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court,Van"
alert(person1.friends === person2.friends); //true
JavaScript对象 创建对象(一)的更多相关文章
- JavaScript对象 创建对象(二)
组合使用构造函数和原型模式创建对象 function Person(name, age, job){ this.name = name; this.age = age; this.job = job; ...
- JavaScript对象类型之创建对象
引言 JavaScript中,可以通过对象直接量,关键字new(ECMAScript 5中的)Object.create(),函数来创建对象. 对象直接量 JavaScript中使用对象直接量来创建对 ...
- javascript——对象的概念——创建对象与销毁对象
一.创建对象 1.创建空对象 方式一: var o ={};o; //Object {} typeof(o); //"object" 方式二: var o=new Object() ...
- 如何理解javaScript对象?
在我们生活中,常常会提到对象一词,如:你找到对象了吗?你的对象是谁呀?等等. 在我们家庭中,有男友的女青年都会说我有对象了,那么她的对象是XX(她的男友). 夫妻间呢?都会说我的爱人是谁谁谁,现在我们 ...
- web前端学习(二) javascript对象和原型继承
目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象 在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符 ...
- 深入理解JavaScript中创建对象模式的演变(原型)
深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...
- JavaScript基础——使用JavaScript对象
JavaScript有许多内置对象,如Number(数字).Array(数组).String(字符串).Date(日期)和Math(数学).这些内置对象都有成员属性和方法.除了JavaScript对象 ...
- 第六章:Javascript对象
对象是javascript的基本数据类型.对象是一种复合值.它将很多值(原始值 或者其他对象)聚合在一起.可通过名字访问这些值.对象也可以看做是属性的无序集合,每个属性都有一个名/值.属性名是字符串, ...
- javascript中创建对象的方式总结
javascript中创建对象的方式总结 具体代码如下: //创建对象的方式: //创建方式一 var person=new Object(); person.name='jack'; person. ...
随机推荐
- Windows10电脑系统时间校准
有时候新安装电脑系统,系统时间不对,需要主动去校准系统时间. 1.点击时间 2.日期和时间设置 3.其他日期.时间和区域设置 4.设置时间和日期 5.Internet 时间 6.点击立即更新,如果更新 ...
- linux获取域名地址
dig live-195887137.cn-north-1.elb.amazonaws.com.cn +short
- F - ACboy needs your help again! (模拟)
ACboy was kidnapped!! he miss his mother very much and is very scare now.You can't image how dark th ...
- react.js学习之路四
针对学习react.js中,我感觉最大的疑惑点就是bind(this)的绑定和指向问题了,我被这个问题弄的头昏,有时候调用组件的时候,直接显示undefined,不存在这个组件,当时的心情是崩溃的,整 ...
- opencv学习笔记(四)--图像平滑处理
图像平滑处理的几种常用方法: 均值滤波 归一化滤波 高斯模糊 中值滤波 平滑处理(模糊)的主要目的是去燥声: 不同的处理方式适合不同的噪声图像,其中高斯模糊最常用. 其实最重要的是对图像卷积的核的理解 ...
- HDU-1431-素数回文(暴力打表)
素数回文 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- 域名dns 查询
腾讯云 DNS 使用不同套餐版本的解析分别为不同集群,每种集群对应的 DNS 地址是不同的: 解析套餐版本 DNS 地址 备注 免费 DNS 地址 f1g1ns1.dnspod.net/f1g1ns2 ...
- ZOJ - 1539 记忆化搜索
注意不要仅搜DP(1e7),因为这不是线性的 #include<iostream> #include<algorithm> #include<cstdio> #in ...
- [jQuery] 在线引用地址
百度静态资源公共库: http://libs.baidu.com/jquery/1.9.1/jquery.js jQuery网站: http://code.jquery.com/jquery-1.9. ...