JavaScript Constructor & prototype
阮一峰 JavaScript OOD 三部曲:
封装
JS 是一种基于对象(object-based)的语言. 但是JS不是一种真正的OOP语言, 因为语法中没有class.
以下就是简单的封装. 把两个属性封装在一个对象里面. 但是,这样的写法有缺陷.
1. 如果要多生成几个实例,写起来就非常麻烦.
2. 实例与原型之间,没有任何办法看出联系.
<script>
var Cat = {
name: '',
color: ''
}
var cat1 = {};
cat1.name = '黑猫';
cat1.color = '黑色'; var cat2 = {
name: '白猫',
color: '白色'
};
console.log(cat1);
console.log(cat2);
</script>
改进方法
我们可以写一个函数, 来解决代码重复的问题.
<script>
function dog(name, color) {
return {
name: name,
color: color
}
}
var dog1 = dog('二狗子','黑色');
var dog2 = dog('狗蛋儿','黄色'); console.log(dog1);
console.log(dog2);
</script>
构造函数
JS的构造函数和传统编程语言不同. 所谓"构造函数",其实就是一个普通函数, 但是内部可以使用this变量(JS this变量随笔), 并且this 变量会绑定在实例对象上. 只需要把function 名字首字母大写就来代表这个function是constructor
通过构造函数, 我们现在原型就可以这么写了:
<script>
function Dog(name, color) {
this.name = name;
this.color = color;
}
var dog1 = new Dog('二狗子', '黑色');
var dog2 = new Dog('狗蛋儿', '黄色'); console.log(dog1);
console.log(dog2);
console.log(dog1.constructor === Dog); // true
</script>
构造函数的问题
构造函数方法很好用,但是存在一个浪费内存的问题. e.g.
这么做有一个弊端就是 property type 和 function eat()都是一模一样的内容, 每次生成一个实例, 都必须为重复的内容, 会多次占用内存. 这样缺乏效率和内存管理.
我们有办法像.NET 中引用类型的用法, 指向内存地址,从而节约内存使用. 这个方法就是prototype.
<script>
function Dog(name, color) {
this.name = name;
this.color = color;
this.type = '犬类';
this.eat = function() {console.log('啥都吃');};
}
var dog1 = new Dog('二狗子', '黑色');
var dog2 = new Dog('狗蛋儿', '黄色');
console.log(dog1.type) // 犬类
dog1.eat(); // 啥都吃 console.log(dog1.eat === dog2.eat); // false
</script>
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html
prototype
JavaScript规定, 每个构造函数都有一个prototype属性, 指向另一个对象. 这个对象的所有属性和方法, 都会被构造函数实例继承.
prototype 用.NET 知识来解释, 可以认为是引用类型. 指向内存同一块
那什么时候使用prototype呢? prototype应该储存那些在object中常被子类使用的公共类型而不经常改变的primitive和function.
使用prototype可以减少使用资源.
object里面其他的内容可以理解为值类型.
prototype chain
原型链是有OOD种继承的特性.
John 是从 Person 这个constructor中继承实例化得到的. 所以John的 __proto__ === Person.prototype // true
我们看到 __proto__ 底下还有 __proto__. 这是因为 我们Person 这个constructor的prototype 是从 object中继承实例化得到的. 所以Person的__proto__ 拥有所有object的__proto__的特性.
prototype 和 __proto__ 关系
在developer tool中, __proto__ 就是object 中的prototype property.
https://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript
Object.Create 和 新实例化的function constructor的区别
Object.Create 只需要继承first argument(此例子中的calculateAge 这个function)
Object.Create 的benefit 是可以让开发人员把一个非常复杂继承结构转换成一个简单的形式.
因为开发人员可以直接的控制哪些prototype需要继承. 但是function constructor 需要继承所有的父中prototype.
新实例化的function constructor需要从继承的function constructor 里面继承所有的prototype property.
// Object.create
var personProto = {
calculateAge: function() {
console.log(2016 - this.yearOfBirth);
}
}; var john = Object.create(personProto);
john.name = "John";
john.yearOfBirth = 1990;
john.job = "teacher"; var jane = Object.create(personProto, {
name: {value: 'Jane'},
yearOfBirth: {value: 1969},
job: {value: 'dev'}
});
Prototype 的验证方法
JavaScript 定义了一些方法去验证, 帮助我们使用prototype.
<script>
var Person = function (name, yearOfBirth, job) {
this.name = name;
this.yearOfBirth = yearOfBirth;
this.job = job;
} Person.prototype.calculateAge = function () {
console.log(2016 - this.yearOfBirth);
}
Person.prototype.type = '哺乳动物'; var john = new Person('John', 1990, 'teacher');
var jane = new Person('Jane', 1969, 'designer');
var mark = new Person('Mark', 1948, 'retried');
</script>
isPrototypeOf()
这个method用来潘丹prototype对象和实例之间的关系.
console.log(Person.prototype.isPrototypeOf(john)); //true console.log(Person.prototype.isPrototypeOf(jane)); //true
hasOwnProperty()
这个method是用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性.
console.log(john.hasOwnProperty("name")); // true console.log(john.hasOwnProperty("type")); // false
in 运算符
in 运算符可以用来判断某个实例是否含有某个属性. 不管是不是本地属性
console.log("name" in john); // true
console.log("type" in jane); // true
JavaScript Constructor & prototype的更多相关文章
- 彻底搞清javascript中this, constructor, prototype
说起这三个属性,肯定有一些同学和我一样,初学js时非常困惑,头大,一脸的迷茫.今天就来给大家彻底解决这些担心受怕的问题. 先看this this定义: this就是函数赖以执行的对象. 分析这句话: ...
- javascript 之 prototype 浅析
prototype 原型 javascript 是一种 prototype based programming 的语言, 而与我们通常的 class based programming 有很大 的区别 ...
- Javascript: 从prototype漫谈到继承(2)
本文同时也发表在我另一篇独立博客 <Javascript: 从prototype漫谈到继承(2)>(管理员请注意!这两个都是我自己的原创博客!不要踢出首页!不是转载!已经误会三次了!) 上 ...
- 在 JavaScript 中 prototype 和 __proto__ 有什么区别
本文主要讲三个 问题 prototype 和 proto function 和 object new 到底发生了什么 prototype 和 proto 首先我们说下在 JS 中,常常让我们感到困惑的 ...
- Javascript中prototype属性
prototype作为JS相对比较难理解的一个知识点,在这里发表下自己的理解. 本文将包含以下几部分内容: 1.js prototype的简单介绍, 2.js构造函数的介绍, 3.prototype的 ...
- js老生常谈之this,constructor ,prototype
前言 javascript中的this,constructor ,prototype,都是老生常谈的问题,深入理解他们的含义至关重要.在这里,我们再来复习一下吧,温故而知新! this this表示当 ...
- Javascript中prototype属性详解 (存)
Javascript中prototype属性详解 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...
- JavaScript constructor 属性详解
对象的constructor属性用于返回创建该对象的函数,也就是我们常说的构造函数. 在JavaScript中,每个具有原型的对象都会自动获得constructor属性.除了arguments.Enu ...
- javascript继承—prototype最优两种继承(空函数和循环拷贝)
一.利用空函数实现继承 参考了文章javascript继承-prototype属性介绍(2) 中叶小钗的评论,对这篇文章中的方案二利用一个空函数进行修改,可以解决创建子类对象时,父类实例化的过程中特权 ...
随机推荐
- SQL-27 给出每个员工每年薪水涨幅超过5000的员工编号emp_no、薪水变更开始日期from_date以及薪水涨幅值salary_growth,并按照salary_growth逆序排列。 提示:在sqlite中获取datetime时间对应的年份函数为strftime('%Y', to_date)
题目描述 给出每个员工每年薪水涨幅超过5000的员工编号emp_no.薪水变更开始日期from_date以及薪水涨幅值salary_growth,并按照salary_growth逆序排列. 提示:在s ...
- 《深入分析Java Web技术内幕》读书笔记 - 第1章 深入Web请求过程
第1章 深入Web请求过程 1 1.1 B/S网络架构概述 2 基于统一的应用层协议HTTP来交互数据. 1.2 如何发起一个请求 4 HTTP连接本质是建立Socket连接.请求实现方式:工具包如H ...
- Linux文件系统命令 touch/rm
命令:touch 功能:创建文件,后接相对路径或者绝对路径 eg: touch ./ren/jin/gui.txt 命令:rm 功能:删除文件,当删除的是目录的时候要加-R参数进行递归删除. eg: ...
- SQL--数据表--基本操作
表操作 表与字段是密不可分的. 新增数据表 Create table [if not exists] 表名(字段名字 数据类型,字段名字 数据类型 --最后一行不需要逗号) [表选项] ; if no ...
- 18-09-08 关于Linux 的安装遇到的一些小坑
具体参考我的有道笔记 备注 那个网络问题已经解决 先自动选择打上勾 然后在进行选择 并且正确输入 IP地址之类的 ====用utrallo 制作centos7.0 报错 以下是新的工具有效===== ...
- Could not load driverClass com.mysql.jdbc.Driver错误
在整合spring和mybatis的时候,在spring配置文件中已经加载了db.properties并配置了c3p0数据源 但在写了一个测试类测试是否取到了数据库的连接时,报错:Could not ...
- python生产者消费者模型优点
生产者消费者模型:解耦,通过队列降低耦合,支持并发,生产者和消费者是两个独立的并发体,他们之间使用缓存区作为桥梁连接,生产者指望里丢数据,就可以生产下一个数据了,消费者从中拿数据,这样就不会阻塞,影响 ...
- 启动mongodb出现的问题
启动mongodb时,首先要启动服务端,然后再启动客户端 启动服务端 1.找到一个存放mongodb数据的目录 比如D盘下data中 2.找到mongodb下的bin目录 3.配置数据存放路径 m ...
- vmware安装centos问题
* 选择安装后,一直黑屏 重新启动电脑,在启动界面进入BIOS设置,找到Intel (R) Virtualization Technology,设置成Enabled,保存设置以后重新启动电脑,问题解决 ...
- Python之路PythonNet,第二篇,网络2
pythonnet 网络2 问题: 什么是七层模型tcp 和udp区别三次握手和四次挥手************************************************** tcp ...