菜鸟快飞之JavaScript对象、原型、继承(二)
上一节写了创建对象的三种方法,而其中通过函数创建对象的方式又有三种模式,分别是工厂模式、构造函数模式、原型模式。而这三种模式最常用的则是原型模式。还是上栗子:
工厂模式:
function Fun1(name,age){
var obj = {};
obj.name = name;
obj.age = age;
obj.sayNmae = function(){
return this.name;
};
return obj;
}
var p1 = Fun1('xiaohong', 22);
var p2 = Fun1('xiaoming', 25);
p1 instanceof Fun1; // false
工厂模式的缺点在于无法进行对象识别,就是知道一个对象的类型。(ps:其实我也没太搞明白这个用处,写的代码太少)
构造函数模式:
function Person(name,age) {
this.name = name;
this.age = age;
this.sayName = function() {
console.log('你好,我叫:' + this.name);
};
}
var p1 = new Person('小明', 25);
var p2 = new Person('小花', 23);
p1 instanceof Person; // true
使用构造函数模式创建对象,需要使用new操作符来创建实例,通过这种方式调用构造函数会经历以下4个过程:
1.创建一个新对象
2.将构造函数的作用域赋给新对象,从而使this指向新对象
3.执行构造函数中的代码
4.返回新对象
现在可以使用instanceof来检测对象类型了。
不过单纯的通过构造函数来创建对象也是有缺点的,缺点就是重复创建实例,比如上面代码中的sayName()方法会被创建两次。
组合使用构造函数模式和原型模式:
因为方法sayName()是可以共享的,所以我们不需要让它多次创建,为了解决这个问题,我们可以把方法sayName()拿出来,放在函数Persorn的外面,但是这样做就体现不出封装性了,所以这个时候需要的就是原型模式了。
构造函数模式用来定义实例的属性,原型模式用来定义共享的方法和属性。
function Person(name,age) {
this.name = name;
this.age = age;
}
Person.prototype.sayName = function() {
console.log('你好,我叫:' + this.name);
};
var p1 = new Person('小明', 25);
var p2 = new Person('小花', 23);
p1.sayName(); // 你好,我叫:小明
p2.sayName(); // 你好,我叫:小花
原型
prototype与__proto__
每个函数都有一个prototype(原型)属性,这个属性指向一个对象,用来包含所有实例共享的属性和方法。
通过构造函数创建一个新实例后,这个实例会有一个指针[[Prototype]],我们可以通过__proto__属性来访问,这个链接存在于实例和构造函数的原型对象之间:Person.prototype === person.__proto__。
isPrototypeOf(instence)
isPrototypeOf()方法用来确定实例与构建函数的原型对象的关系。
Person.prototype.isPrototypeOf(p1); // true
Object.getPrototypeOf(instence)
Object.getPrototypeOf()返回创建这个实例对象的构建函数的原型对象。
Object.getPrototypeOf(p1) === Person.prototype; // true
hasOwnProperty()
hasOwnProperty()可以用来检测属性是否存在于实例对象中。
for-in
for-in循环中,返回实例和原型中所有可以访问,可枚举的属性。
function Person(name,age) {
this.name = name;
this.age = age;
}
Person.prototype.sayName = function() {
console.log('你好,我叫:' + this.name + '。性别:' + this.sex);
};
Person.prototype.sex = '男';
var p1 = new Person('小明', 25);
p1.sayName(); // 你好,我叫:小明。性别:男
for(var i in p1){
if(p1.hasOwnProperty(i)){
console.log(i); // name和age
}
}
Object.keys()
Object.keys()返回给定对象上所有可枚举的实例属性。
Object.keys(Person.prototype); // ["sayName", "sex"]
Object.getOwnPropertyNames()
Object.getOwnPropertyNames()放回给定对象上所有实例属性,包括不可枚举的实例属性。
Object.getOwnPropertyNames(Person.prototype); // ["constructor", "sayName", "sex"]
菜鸟快飞之JavaScript对象、原型、继承(二)的更多相关文章
- 菜鸟快飞之JavaScript对象、原型、继承(三)
正文之前需要声明的一点是,菜鸟系列博文全是基于ES5的,不考虑ES6甚至更高版本. 继承 由于我个人不是学计算机的,所以对于很多东西只是知其然,不知其所以然.就像这个继承,刚开始学JavaScript ...
- 菜鸟快飞之JavaScript对象、原型、继承(一)
有前辈说过,在JavaScript中,一切皆对象.由此可见,作为JavaScript的核心之一,对象是有多么重要.虽然今天走亲戚有点累,但还是得写写这个对象,免得吃几天好的,就又忘光了. 1.创建对象 ...
- 菜鸟快飞之JavaScript函数
1.复制变量值 在说函数前,我觉得需要先说说关于变量值的复制,以便后面的理解. 复制基本类型的值: 当一个变量复制另外一个值为基本类型的变量时,两个变量可以参与任何操作而不会互相影响 var num1 ...
- 关于js的对象原型继承(二)
本章讨论使用new一个构造函数来创建一个对象. 前期知识点说明: 1.prototype是函数的一个属性,每个函数都有一个prototype属性.这个属性是一个指针,指向一个对象.它是显示修改对象的原 ...
- #JavaScript对象与继承
JavaScript对象与继承 JavaScript是我在C语言之后接触的第二门编程语言,大一暑假的时候在图书馆找了一本中国人写的JavaScript程序设计来看.那个时候在编程方面几乎还是小白,再加 ...
- JavaScript的原型继承
JavaScript是一门面向对象的语言.在JavaScript中有一句很经典的话,万物皆对象.既然是面向对象的,那就有面向对象的三大特征:封装.继承.多态.这里讲的是JavaScript的继承,其他 ...
- JavaScript大杂烩4 - 理解JavaScript对象的继承机制
JavaScript是单根的完全面向对象的语言 JavaScript是单根的面向对象语言,它只有单一的根Object,所有的其他对象都是直接或者间接的从Object对象继承.而在JavaScript的 ...
- 关于js的对象原型继承(一)
javascript中,对象的继承是通过原型去继承. 可以这样理解:js中的对象,包含的除了属性和方法,还有一个最基本的原型__proto__对象.这个原型__proto__指向谁,这个对象就继承谁. ...
- JavaScript对象的继承
原文 简书原文:https://www.jianshu.com/p/78ce11762f39 大纲 前言 1.原型链继承 2.借用构造函数实现继承 3.组合模式继承 4.原型式继承 5.寄生式继承 6 ...
随机推荐
- android Handler介绍
Handler使用介绍: Handler根据接收的消息,处理UI更新.Thread线程发出消息,通知Handler更新UI. Handler mHandler = new Handler() { p ...
- SQLite学习笔记(十)&&加密
随着移动互联网的发展,手机使用越来越广泛,sqlite作为手机端存储的一种解决方案,使用也非常普遍.但是sqlite本身安全特性却比较弱,比如不支持用户权限,只要能获取到数据库文件就能进行访问:另外也 ...
- 网站缓存技术总结( ehcache、memcache、redis对比)
网站技术高速发展的今天,缓存技术已经成为大型网站的一个关键技术,缓存设计好坏直接关系的一个网站访问的速度,以及购置服务器的数量,甚至影响到用户的体验. 网站缓存按照存放的地点不同,可以分为客户端缓存. ...
- C++的性能C#的产能?! - .Net Native 系列四:性能测试方法(PerfView)
之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...
- 在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView
背景 在前一篇文章<[初学者指南]在ASP.NET MVC 5中创建GridView>中,我们学习了如何在 ASP.NET MVC 中实现 GridView,类似于 ASP.NET web ...
- 拉格朗日插值法——用Python进行数值计算
插值法的伟大作用我就不说了.... 那么贴代码? 首先说一下下面几点: 1. 已有的数据样本被称之为 "插值节点" 2. 对于特定插值节点,它所对应的插值函数是必定存在且唯一的(关 ...
- StringBuffer 的 各种方法
StringBuffer 其实提供了很多有用的方法, 以前用的多是 append, 其实还有: append(double) delete(int, int) deleteCharAt(int) re ...
- PHPUnit笔记
PHPUnit是一个面向PHP程序员的测试框架,这是一个xUnit的体系结构的单元测试框架. 复杂的项目,通过单元测试能够快速排查bug,有效减少bug的产生.简单的项目,使用php自带的var_du ...
- 【译】Unity3D Shader 新手教程(4/6) —— 卡通shader(入门版)
本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 暗黑系 动机 如果你满足以下条件,我建议你阅读这篇教程: 你想了解更多有关表面着色器的细节知识. 你想实现一个入门 ...
- OpenCASCADE Ring Type Spring Modeling
OpenCASCADE Ring Type Spring Modeling eryar@163.com Abstract. The general method to directly create ...