JavaScript学习笔记（创建对象）

最新推荐文章于 2024-09-17 11:42:54 发布
最新推荐文章于 2024-09-17 11:42:54 发布
阅读量66 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/3260543/blog/1538787
版权

1. 工厂模式

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", 29, "software engineer");
var person2 = createPerson("Greg",27,"doctor");

存在问题：无法识别对象所属类

2. 构造函数模式

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和person2都有一个constructor属性，该属性指向Person

alert(person1.constructor == Person);  //true
alert(person2.constructor == Person);  //true

如果需要检测对象类型，instanceof操作符会更可靠一些。通过instanceof操作符可以验证person1和person2既是Person的实例，同时也是Object的实例，因为所有的对象都继承自Object。

alert(person1 instanceof Object);  //true
alert(person1 instanceof Person);  //true
alert(person2 instanceof Object);  //true
alert(person2 instanceof Person);  //true

构造函数与其他函数唯一的区别在于调用方式不同。任何函数，只要通过new操作符来调用就是构造函数，只要不是通过new操作符调用的就是普通函数

// 当作构造函数使用
var person = new Person("Nicholas", 29, "software engineer");
person.sayName();  //"Nicholas"

// 作为普通函数调用
Person("Greg", 27, "doctor");  //添加到window
window.sayName();  //"Greg"

// 在另一个对象的作用域中调用
var o = new Object();
Person.call(o, "Kristen", 25, "Nurse");
o.sayName();  //"Kristen"

存在问题：person1和person2虽然都是Person的实例，但它们都独自拥有一个sayName()方法。在内存中将会存在完成相同任务的多个相同函数，这是浪费内存空间且不必要的。

3. 原型模式

每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型的好处是可以让所有对象实例共享它说包含的属性和方法。

function Person(name,age,job){
}

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

将sayName()方法和所有属性都添加到Person的prototype属性中，构造函数成了空函数。这样依然能通过构造函数创建对象，且所有的对象都具有相同的属性和sayName()方法。

                        

上图展示了构造函数、原型和实例之间的关系。它们可以调用sayName()方法是通过查找对象属性的过程来实现的。person1和person2中的[[Prototype]]属性是无法访问到的，可以通过isPrototypeOf()方法来检测对象之间的关系

alert(Person.prototype.isPrototypeOf(person1));  //true
alert(Person.prototype.isPrototypeOf(person2));  //true

ECMAScript 5 增加了一个新的方法 Object.getPrototypeOf()，支持这个方法的浏览器有：IE 9+、 Firefox 3.5+、Safari 5+、Opera 12+和Chrome

alert(Object.getPrototypeOf(person1) == Person.prototype); //true
alert(Object.getPrototypeOf(person1).name);  //"Nicholas"

如果构造函数中和原型中存在同名的属性，实例调用该属性时会调用构造函数中的，忽略原型中的。

可以使用hasOwnPrototype()方法检测一个属性是否存在与构造函数中还是原型中

var person1 = new Person();
var person2 = new Person();

alert(person1.hasOwnProperty("name"));  //false

person1.name = "Greg";
alert(person1.name);  //"Greg"--来自实例
alert(person1.hasOwnProperty("name"));  //true

alert(person2.name);  //"Nicholas"--来自原型
alert(person2.hasOwnProperty("name"));  //false

delete person1.name;
alert(person1.name);  //"Nicholas"--来自原型
alert(person1.hasOwnProperty("name"));  //false

3.1 原型与in操作符

in操作符可以单独使用也可以在for-in循环中使用。单独使用in操作符在对象能够访问给定属性时返回true。

alert(person1.hasOwnProperty("name"));  //false

person1.name = "Greg";
alert(person1.name);  //"Greg"--来自实例
alert(person1.hasOwnProperty("name"));  //true
alert("name" in person1);  //true

alert(person2.name);  //"Nicholas"--来自原型
alert(person2.hasOwnProperty("name"));  //false
alert("name" in person2);  //true

和hasOwnProperty()方法同时使用可以确定属性定义在对象中还是原型中

function hasPrototypeProperty(object, name){
	return !object.hasOwnProperty(name) && (name in object);
}

var person1 = new Person();
alert(hasPrototypeProperty(person1,"name"));  //true

person1.name = "Greg";
alert(hasPrototypeProperty(person1,"name"));  //false

for-in可以枚举对象所有可访问、可枚举的属性和方法

var o = {
	toString: function(){
		return "My Object";
	}
};

for(var prop in o){
	if(prop == "toString"){
		alert("Found toString");  //在 IE 中不会显示
	}
}

要取得对象中所有可枚举的实例属性，可以使用ECMAScript 5 的Object.keys()。该方法接收一个对象作为参数，返回字符串数组

function Person(name,age,job){
}

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 person1 = new Person();
person1.name = "Rob";
person1.age = 31;
var p1keys = Object.keys(person1);
alert(p1keys);  //"name,age"

3.2 更简单的原型语法

可以直接重新定义prototype。

function Person(name,age,job){
}

Person.prototype = {
	construct : Person,
	name : "Nicholas",
	age : 29,
	job : "software engineer",
	sayName : function(){
		alert(this.name);
	}
};

3.3 原型的动态性

对原型对象所做的任何修改都能够立即在实例上反映出来

var person1 = new Person();

Person.prototype.sayHi = function(){
 	alert("hi");
 };
 
 person1.sayHi();  //"hi"（没有问题）

需要特别注意，实例化和定义原型的顺序，实例化对象必须在定义原型之后才会有影响

function Person(name,age,job){
}

var person1 = new Person();

Person.prototype = {
	construct : Person,
	name : "Nicholas",
	age : 29,
	job : "software engineer",
	sayName : function(){
		alert(this.name);
	}
};

person1.sayName();  //error

3.4 存在问题

存在原型中的引用类型值的属性会被所有实例共享，实例对属性的修改会互相影响。所以，原型模式不适合单独使用

function Person(){
}

Person.prototype = {
	construct : 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

4. 组合模式

结合原型模式和构造函数模式，构造函数用于定义实例属性，而原型模式用于定义共享属性和方法。

function Person(name, age, job){
	this.name = name;
	this.age = age;
	this.job = job;
	this.friends = ["Shelby", "Court"];
}

Person.prototype = {
	construct : Person,
	sayName : function(){
		alert(this.name);
	}
};

var person1 = new Person("Nicholas", 29, "software engineer");
var person2 = new Person("Greg", 27, "doctor");

person1.friends.push("Van");

alert(person1.friends);  //"Shelby,Court,Van"
alert(person2.friends);  //"Shelby,Court"
alert(person1.friends === person2.friends);  //false
alert(person1.sayName === person2.sayName);  //true

5. 动态原型模式

动态原型模式也是原型模式和构造函数模式的结合，区别在于将所有信息都封装在构造函数中。

function Person(name, age, job){
	this.name = name;
	this.age = age;
	this.job = job;
	this.friends = ["Shelby", "Court"];
	
	if(typeof this.sayName != "function"){
		Person.prototype.sayName = function(){
			alert(this.name);
		}
	}
}

var person1 = new Person("Nicholas", 29, "software engineer");
person1.sayName();

6. 寄生构造函数模式

这个模式可以在藤属的情况下用来为对象创建构造函数，假设创建一个具有额外方法的特殊数组

function SpecialArray(){
	//创建数组
	var values = new Array();
	
	//添加值
	values.push.apply(values, arguments);
	
	//添加方法
	values.toPipedString = function(){
		return this.join("|");
	};
	
	//返回数组
	return values;
}

var colors = new SpecialArray("red","blue","green");
alert(colors.toPipedString());  //"red|blue|green"

 

参考文献： JavaScript高级程序设计（第3版）

转载于:https://my.oschina.net/u/3260543/blog/1538787

chushulv5884
关注
JavaScript学习笔记之创建对象
10-22
在JavaScript中对象是一种基本的数据类型，在数据结构上是一种散列表，可以看作是属性的无序集合，除了原始值其他一切都是对象。这篇文章主要给大家介绍JavaScript学习笔记之创建对象，需要的朋友参考下吧
JavaScript学习笔记之内置对象
11-30
在这个学习笔记中，我们将探讨JavaScript的内置对象，主要包括Window、Screen、Location、History等，它们都是JavaScript环境中非常重要的组成部分。 首先，Window对象是JavaScript的核心，它代表了浏览器的窗口。...
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1078
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
Javascript入门学习笔记
weixin_61370021的博客
04-27 4644
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
JavaScript学习笔记（六）
wz_1992的博客
07-02 954
try语句使您能够测试代码块中的错误。catch语句允许您处理错误。throw语句允许您创建自定义错误。finally使您能够执行代码，在try和catch之后，无论结果如何。
JavaScript的学习笔记
m0_62740234的博客
03-26 2158
自己在学习前段时整理的javascript笔记。
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
JavaScript学习笔记4——对象
m0_62146534的博客
01-22 1631
对象:(object)是JavaScript里的一种数据类型，是一种无序的数据集合。注：数组是有序的数据集合。作用：用来描述某个事物，例如描述一个人，人有身高、性别、工作、年龄等信息。如果用多个变量保存就会比较分散，所以使用对象来统一起来比较好。
JavaScript入门学习笔记
Hi
03-11 1349
1、JavaScript 2、条件语句 3、循环语句 4、函数 5、事件
JavaScript学习笔记
郑德帅
12-17 1万+
1..什么是JavaScript? 客户端的解释性脚本语言.与Java之间不存在任何关系; 2.JavaScript的语法结构，声明与引入 <script type="text/javascript">...</script> <script type="text/javascript" src="JS文件路径及名称"></scrip...
javaScript学习笔记【尚硅谷】
Mxs_503的博客
03-20 5030
javaScript学习笔记【尚硅谷】 这是我看尚硅谷前端大神超哥视频，所记录的笔记！
小白JavaScript学习笔记----JavaScript 进阶
weixin_51877011的博客
05-05 1818
垃圾回收机制(Garbage Collection) 简称 GCJS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。正因为垃圾回收器的存在，许多人认为JS不用太关心内存管理的问题但如果不了解JS的内存管理机制，我们同样非常容易成内存泄漏（内存无法被回收）的情况不再用到的内存，没有及时释放，就叫做内存泄漏面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。举个栗子：蛋炒饭。
JavaScript学习笔记之创建对象_.docx
10-09
在JavaScript中，对象是核心概念之一，它们是无序...学习和掌握JavaScript对象的创建、属性访问以及原型机制，对于深入理解和使用JavaScript至关重要。理解并熟练运用这些知识点，可以有效地构建复杂的应用程序和组件。
JavaScript学习笔记之JS对象
11-28
在本篇学习笔记中，我们将重点关注两种基本的对象类型：日期对象（Date）和数组对象（Array）。 首先，让我们来看看日期对象Date。在JavaScript中，Date对象用于处理日期和时间。创建一个Date对象的基本格式是`new ...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 912
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 661
【代码】【JavaScript】LeetCode：707设计链表。
记录开发一个英语听力训练网站
业余程序员Blue的博客
09-14 682
目前只导入了雅思历年真题的听力音频，作为我日常练习英语听力的素材足够了。网站的主要功能其实就是英语句子精听，核心目的就是反复听每一句话，直到听懂为止，我觉得听力训练也没有太多技巧可言，就是老老实实地坚持去听，所谓网上经常说的“磨耳朵”吧。基于此，听力页面主要功能有：播放/暂停、上一句/下一句、播放次数选择、播放倍速选择、字体大小选择、是否显示原文、是否显示译文、是否自动播放下一句。而这些功能，基本上都是页面js操作。
使用 uni-app 开发微信小程序的详细指南
2301_79685859的博客
09-16 784
uni-app是一个使用 Vue.js 框架开发跨平台应用的前端框架。开发者通过编写一套代码，可以生成多端应用，包括 H5、iOS、Android、微信小程序、支付宝小程序、字节跳动小程序等。
前端vue3打印，多页打印，不使用插件（工作中让我写一个打印功能）
最新发布
m0_51798113的博客
09-17 545
getTableData().tableData，其实就是去后端获取参数去了，因为这是公司的前端框架，基于vxe的，包装的方法，获取了一个表格信息，相当于获取参数。说下总体思路，创建一个组件，里面放多个span字段，然后根据父组件传入的参数，生成子组件，最好我们打印子组件的信息即可。这里也很关键，中间我遇到一个问题，那就是经常第一次点击按钮，dom元素没有加载完，就弹出打印框了，所以我加了一个异步事件，还有记得把抽屉关了。
JavaScript学习笔记：函数与对象创建
- **创建对象**：可以使用构造函数或字面量方式创建对象。例如，`var p = new play();` 或 `var p = new Object();` - **添加属性**：对象的属性可以通过`.`操作符设置，如`p.width = 300;` - **添加方法**：对象...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值