Javascript高级程序设计——面向对象之创建对象
对象创建方法:
- 工厂方法
- 构造函数模式
- 原型模式
- 组合构造函数和原型模式
- 寄生构造函数模式
- 问题构造函数模式
工厂模式:
function Person(name, age){
var obj = new Object(); //创建对象
obj.name = name; //添加方法、属性
obj.age = age;
obj.sayName = function(){
alert(this.name);
}
return obj; //返回对象
}
var people = Person("yangxunwu", 24);
缺点:返回的对象全部是object的实例,无法完成对象识别
构造函数模式:
function Person(name, age){
this.name = name; //添加方法、属性
this.age = age;
this.sayName = function(){
alert(this.name);
};
}
var people = new Person("yangxunwu", 24);
//注意多了new操作
构造函数创建实例时,必须用new操作符,经历四个步骤:
- 创建对象
- 将构造函数的作用域赋给对象。(this指向新对象)
- 执行构造函数代码。
- 返回新对象。
缺点:虽然创建的实例可以通过instanceof操作符 来识别,但函数无法复用。
原型模式:
function Person(){ //创建空的构造函数
}
Person.prototype.age = age; //构造函数原型上添加属性和方法,达到函数复用
Person.prototype.sayName = function(){
alert(Person.prototype.name);
};
var people = new Person();
当创建一个新函数时,会自动根据特定规则为函数创建prototype属性,这个属性是一个指针指向函数的原型对象,
原型对象会自动的获得一个constructor属性,这也是一个指针,指向拥有这个prototype属性的函数。
Pesson.prototype.constructor = Person
创建自定义构造函数后,其原型对象自动获得constructor属性,其他的方法都从object继承。当通过构造函数创建
一个新实例后,实例自动获得一个指针,指向构造函数的原型对象,一般名称是__proto__属性。
当代码读取某个属性时,一般会经过两个过程一个是在实例上搜索属性,搜索不到就通过__proto__属性到原型对象上搜索。
通过hasOwnProperty()方法,可以检测一个属性是存在实例中还是原型中,实例中返回true。
原型对象上的属性可以让所有实例共享,但是当属性为引用类型时就会容易产生问题。
function Person(){
}
Person.prototype.names = ["yang", "zhang"];
var people1 = new Person();
var people2 = new Person();
people1.names //["yang", "zhang"]
people2.names //["yang", "zhang"]
people1.names.push("test"); //因为属性共享,而且是引用类型,所以names改变了
people1.names //["yang", "zhang", "test"]
people1.names //["yang", "zhang", "test"]
实例一般应该有自己的全部属性,这里没有
组合使用构造函数模式和原型模式
function Person(name, age){ //构造函数继承的属性是独有的
this.name = name;
this.age = age;
this.friends = ["yang", "zhang"];
}
Person.prototype.sayName = function(){ //通过原型模式来共享方法
alert(this.name);
}
//创建实例,实例不共享属性,共享方法
var people1 = new Person("yangxunwu", 24);
var people2 = new Person("hexiaoming", 6);
//访问引用类型
people1.friends; //["yang", "zhang"]
people1.friends; //["yang", "zhang"]
//为添加元素
people1.friends.push("wang");
people1.friends; //["yang", "zhang","wang"] 元素被添加到people1的属性中,因为构造函数不共享属性
people1.friends; //["yang", "zhang"]
people1.sayName === people2.sayName //true。共享方法
动态原型模式:
function Person(name, age){ //动态原型模式
this.name = name;
this.age = age;
this.friends = ["yang", "zhang"];
if(Person.prototype.sayName != "function"){ //动态加载,只在第一次添加原型方法
Person.prototype.sayName = function(){
alert(this.name);
}
};
}
只在第一次调用构造函数时执行,之后原型已经完成初始化。
寄生构造函数模式:
function Person(name, age){
var obj = new Object(); //生成一个Objdetde对象
obj.name = name;
obj.age = age;
obj.sayName = functon(){
alert(this.name);
}
return obj; //返回的一直是Object的对象。
}
var people = new Person("yangxunwu", 24); //与工厂模式的区别,坑
people.sayName(); //yangxunwu
返回的对象与构造函数或者构造函数的原型没关系,而且返回的一直是Object类型。只是把外部干的事放到内部干。
稳妥构造函数:
function Person(name, age){
var obj = new Object();
//定义私有变量和函数
obj.doSomething = function(){
alert(name); //定义可以访问私有变量和函数的方法,没有引用this
}
return obj; //返回对象,现在只有这个对象可以访问这些私有变量和函数。
}
var people = Person("yangxunwu", 24); //没使用new
people.sayName(); //yangxunwu
稳妥构造就是没有公共的属性,不引用this,防止数据被其他应用程序破坏。稳妥构造函数与寄生构造函数不同:
- 新创建的对象方法不引用this
- 不使用new操作符来调用构造函数。
Javascript高级程序设计——面向对象之创建对象的更多相关文章
- Javascript高级程序设计——面向对象小结
ECMAScript支持面向对象编程,对象可以在代码执行时创建,具有动态扩展性而非严格意义上的实体. 创建对象方法: 工厂模式:简单的函数创建引用类型 构造函数模式:可以创建自定义引用类型,可以想创建 ...
- 2020/06/06 JavaScript高级程序设计 面向对象的程序设计
ECMAScript虽然是一种面向对象的语言,但是他没有类的概念.所以他的对象也与其他语言中的对象有所不同. ECMA-262定义对象:一组没有特定顺序的值. 6.1 理解对象 创建对象的方法: 1. ...
- Javascript高级程序设计——面向对象之实现继承
原型链: 构造函数中都有一个prototype属性指针,这个指针指向原型对象,而创建的实例也有指向这个原型对象的指针__proto__.当实例查找方法时先在实例上找,找不到再通过__proto__到原 ...
- Javascript高级程序设计——面向对象之理解对象
在面向对象语言中都有类的概念,通过类来创建具有属性和方法的对象.而ECMAScript中没有类的概念,ECMAScript中定义了对象:无需属性的集合,其属性值可以包含基本值.对象.或者函数. 在Ja ...
- 《Javascript高级程序设计》:创建对象
工厂模式 function createPerson(name,age, job){ var o = new Object(); o.name = name; o.age = age; o.job = ...
- 《JavaScript高级程序设计》学习笔记(5)——面向对象编程
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第六章内容. 1.面向对象(Object ...
- 《JavaScript高级程序设计》学习笔记
系统学习JS, 从<JavaScript高级程序设计>入门,通过学习jQuery或者angularJS源码来进阶. 第1章 JavaScript简介 1.JS问世的目的是处理以前由服务器端 ...
- 《Javascript高级程序设计》阅读记录(六):第六章 下
这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 <Javascript ...
- 《Javascript高级程序设计》阅读记录(五):第六章 上
这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 <Javascript ...
随机推荐
- 用面对对象方式定tab标签
一些公共的底层的JS方法 var GLOBAL = {}; GLOBAL.namespace = function (str) { var arr = str.split('.'), o = GLOB ...
- python03 面向对象的编程01
话不多说,直接进入正文: 编程思想: 我个人所了解的有2种,还有个函数式编程的概念模模糊糊(大概是把常用的代码封装成一个函数,重复调用即可,先认为就是这样吧) 1 面向对象:面向对象是把所有的事务物当 ...
- POJ 1947Rebuilding Roads(树形DP + 01背包)
题目链接 题意:给出一个树形结构,求P个节点的子树最少要去掉几条边 分析:DP[root][j] 表示 以第 root 个为根节点, 包含j 个节点需要去掉几条边.那么对于 root 这个根节点来说, ...
- zabbix 3.0快速安装简介(centos 7)
zabbix快速安装 系统版本:centos 7 通过yum方法安装Zabbix3.0,安装源为阿里云 yum源配置 rpm -ivh http://mirrors.aliyun.com/zabbix ...
- 【原】React操作表单
最近的项目中开发中都是用react,其中有用到react去操纵表单.然后自己就在每个表单元素中添加 ref, 然后再像jquery操作dom一样去操纵这个ref, 代码如下: 首先我在每个表单元素那 ...
- tomcat7.0配置CORS(跨域资源共享)
平时我们做前台页面时可能会遇到浏览器以下提示(浏览器控制台): 已阻止跨源请求:同源策略禁止读取位于 http://xxx.xxx.com 的远程资源.(原因:CORS 头缺少 'Access-Con ...
- HashMap与ArrayList互相嵌套的代码实现
HashMap嵌套ArrayList的代码实现 结果要求为 三国演义 吕布 周瑜笑傲江湖 令狐冲 林平之神雕侠侣 ...
- 关于软件工程个人作业 Word frequency program 的总结
一.预计花在程序各部分的时间: (1)对所给命令行参数的判断和处理,看它是否合法.是哪种模式.预计用时20min; (2)关于目录操作:遍历给定目录下的所有文件,包括子目录和非目录文件.预计用时40m ...
- Rendering Paths
渲染路径 Rendering Paths http://game.ceeger.com/Manual/RenderingPaths.html 延迟光照渲染路径的细节 Deferred Lighting ...
- Python 文件读写,条件循环(三次登录锁定账号实例)
通过文件读写,条件循环相关语法,实现三次登录失败则锁定该账号的功能 需求一 """需求描述: 1.输入正确账号,密码,退出程序 2.登录失败,重新输入账号密码 3.同一账 ...