JavaScript中创建对象的几种模式
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建对象的模式</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
<!--<script src="main.js"></script>-->
</head>
<body>
<script>
//js中没有类的概念，所以开发人员使用函数来封装特定接口从而创建对象
//1.工厂模式，解决了创建多个相似对象的问题，但是没有解决对象识别问题
function t1(name,age,sex){
var o={};
o.name=name;
o.age=age;
o.sex=sex;
return o;
};
var p1=t1('张三',21,'male');
var p2=t1('Alice',23,'female');
console.log(p1,p2);
console.log(typeof p1,typeof p2); // 2.构造函数模式
function T2(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.showInfo=function(){
console.log(this.name+' '+this.age+' '+this.sex);
}
}
var p3=new T2('李四',25,'male');
var p4=new T2('Mary',22,'female');
//此时对象的constructor是用来标识对象类型的
console.log(p3,p4,p3.constructor===T2,p4.constructor===T2);
console.log(p3 instanceof Object,p3 instanceof T2); //如果将构造函数作为普通函数调用，那么属性和方法都被添加到全局对象，这里是window
T2('ww',29,'male');
console.log(window.name,age,sex); // 构造函数模式存在的缺陷：构造函数里面的方法(上面指showInfo)不是共享的，即每次的showInfo不相同
console.log(p3.showInfo===p4.showInfo); // 3.原型模式
function T3(){
}
T3.prototype.name='Aya';
T3.prototype.age=100;
T3.prototype.showInfo=function(){
console.log(this.name);
}; var p5=new T3();
p5.showInfo();
var p6=new T3();
p6.showInfo();
console.log(p5.showInfo===p6.showInfo);
// 实例中的属性或方法会覆盖原型中的属性或方法
p5.name='xiaoming';
p5.showInfo();
delete p5.name;
p5.showInfo();
// js引擎对属性的寻找都是从下往上追溯的 // 使用hasOwnProperty()可以检测属性在实例上，还是在原型上
p6.name='nicai';
console.log(p6.hasOwnProperty('name'));
// 使用in，属性在原型上或者实例上，均返回true
console.log('name' in p5,'name' in p6); // 所以当hasOwnProperty()返回false,而in返回true，那么属性位于原型上
if (!p5.hasOwnProperty('name') && 'name' in p5){
console.log('name属性在原型上');
} // 原型模式更直观的可以写为下面形式：
function T4(){}
T4.prototype={
name:'abc',
age:100,
sayHi:function(){
console.log(this.name);
}
}
// 原型模式存在的问题:1.所有属性初始值一样;2.最大的问题，当含有引用类型时，一个实例对象的修改会导致其它实例对象也跟着修改
function T5(){}
T5.prototype={
constructor:T5,
name:'abc',
age:100,
arr:[1,2,3]
}
var p7=new T5();
var p8=new T5();
//所有实例对象的引用类型会相应变化
p7.arr.unshift(0);
//实例对象的基本类型倒不影响
p7.name='Bob';
console.log(p7.arr,p8.arr,p7.name,p8.name); // 4.组合使用构造函数模式与原型模式
// 是目前在ECMAScript使用最广泛、认可度最高的一种创建自定义类型的方法
function Person(name,age){
this.name=name;
this.age=age;
this.friends=['Alice','Bob'];
}
Person.prototype={
constructor:Person,
sayHello:function(){
console.log(this.name);
} };
var per1=new Person('Apple',1000);
var per2=new Person('Blue',10);
per1.friends.push('cat');
console.log(per1.friends,per2.friends);
console.log(per1.sayHello===per2.sayHello); // 5.动态原型模式
function Person1(name,age){
this.name=name;
this.age=age;
if(typeof this.sayHello !== 'function'){
Person1.prototype.sayHello=function(){
console.log(this.name);
}
}
}
var per3=new Person1('Bill',111);
console.log(per3); // 6.寄生(parasitic)构造函数模式
// 其实与工厂模式一样，除了使用构造函数和new操作符
function Person2(name,age){
var o={};
o.name=name;
o.age=age;
return o;
}
var per4=new Person2('Egg',100); // 7.稳妥(durable)构造函数
// 与寄生构造函数模式类似，但两处不同点：1.新创建对象的实例方法不使用this 2.不使用new 调用构造函数
// 稳妥构造函数适合在某些安全环境下
function Test3(age){
var o={};
o.showName=function(){
console.log(age);
};
return o;
}
var per5=Test3(100);
console.log(per5);
</script>
</body>
</html>
运行结果：
参考<<JavaScript高级程序语言设计>>
JavaScript中创建对象的几种模式的更多相关文章
- JavaScript中创建对象的三种模式
JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返回. 缺点:创建的对象无法识别类型(全是Object) 2.构造函数模式: ...
- JavaScript中创建对象的5种模式
构造函数模式 实现方式: function Person(name, age, job) { this.name = name; this.age = age; this.job = job; thi ...
- javascript中创建对象的几种不同方法
javascript中创建对象的几种不同方法 方法一:最直白的方式:字面量模式创建 <script> var person={ name:"小明", age:20, s ...
- JavaScript中创建对象的三种方式!
JavaScript中创建对象的三种方式! 第一种 利用对象字面量! // 创建对象的三种方式! // 1 对象字面量. var obj = { // 对象的属性和方法! name: 'lvhang' ...
- javascript中创建对象的几种方式
1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的值. var person = new Object(); person.name=&q ...
- javascript 创建对象的7种模式
使用字面量方式创建一个 student 对象: var student = function (){ name : "redjoy", age : 21, sex: women, ...
- 深入理解JavaScript中创建对象模式的演变（原型）
深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...
- 《JAVASCRIPT高级程序设计》创建对象的七种模式
细看javascript创建对象模式的诞生,具体的脉络为:不使用任何模式——工厂模式——构造函数模式——原型模式——组合使用构造函数模式——动态原型模式——寄生构造函数模式——稳妥构造函数模式.每一种 ...
- javascript中创建对象和实现继承
# oo ##创建对象 1. 原型.构造函数.实例之间的关系 * 原型的construct->构造函数:调用isPrototypeOf(obj)方法可以判定和实例的关系: * 构造函数的pro ...
随机推荐
- Django——发送邮件
Django--发送邮件 在web应用中,服务器对客户发送邮件来通知用户一些信息,可以使用邮件来实现. Django中提供了邮件接口,使我们可以快捷的建设一个邮件发送系统. 以下是一个简单实例: se ...
- Django 启动源码
handler = self.get_handler(*args, **options) run(self.addr, int(self.port), handler,ipv6=self.use_ip ...
- python ironicclient源码分析
ironicclient是一个cli工具,用来和用户交互的. 首先写一个简单的例子,获取ironic所有的node节点: from ironicclient import client if __na ...
- json 函数
一, json序列化和反序列化 JSON.stringify( ) —— 将对象序列化为JSON字符串 JSON.parse( ) —— 将JSON数据解析为Javascript对象 二,判断json ...
- 移动端滑动效果 swiper 4.0.7
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...
- WebService的两种方式SOAP和REST有什么不同？
REST API 优点: 1. 轻量级的解决方案,不必向SOAP那样要构建一个标准的SOAP XML. 2. 可读性比较好:可以把URL的名字取得有实际意义. 3. 不需要SDK支持:直接一个Http ...
- 循环结构while
Note:高能:语句结构都是由关键字开头,用冒号结束! 一:语句结构 while 判断条件: 语句 二:基本规则 (1)使用缩进来划分语句块,相同缩进数的语句在一 ...
- request之LIstener监听器
要实现监听request内置对象,必须实现一个接口javax.servlet.ServletRequsetListener. 代码如下: package cn.wangkai.listener; im ...
- 【C++】链表回环检测
//链表回环检测问题 #include<iostream> #include<cstdlib> using namespace std; ; struct node { int ...
- Spring Boot 对请求的映射
在SpringBoot中对请求资源的映射有三种方式: 1.通过编写一个Controller请求,获得客户端发送过来的请求就转发出去 //通过这种方式可以来映射页面请求路径 @PostMapping(& ...