JavaScript的类、对象、原型、继承、引用
以CSS为例，有一种为所有class为"xxxx"的元素添加样式（外联样式），那么所有class为xxx的元素样式就会改变，在css中像下面这么写：
<html>
<head>
<style>
.active{ background:red }
</style>
</head>
<body>
<p class="active">123456789</p>
<p class="active">123456789</p>
<p class="active">123456789</p>
</body>
</html>
CSS中还有一种为单一的元素加样式（行间样式），只会对这一个元素产生效果，像下面这样：
<html>
<head>
<style>
.active{ background:red }
</style>
</head>
<body>
<p style="background:orange">123456789</p>
<p>123456789</p>
<p>123456789</p>
</body>
</html>
以铸造一个铁锅为例：
类：模子，一个锅形状的模具，不可以用来炒菜、煮饭。
对象：用模子造出来的铁锅，可以用来炒菜、煮饭。
对象（铁锅）造出来之后，相互之间就没有太大的关系了，对一个对象（铁锅）进行一些操作，几乎不会影响到其他对象（铁锅），比如将一个铁锅戳个洞，另外一个铁锅依旧完好无损；为一个铁锅加一个把手，另外一个铁锅依旧老样子，没有把手，因为把手只装在了一个铁锅上，这里就类似于上面CSS中的行间样式。
如果做一些操作，让所有的对象（造出的铁锅）都有改变，那么只能在模子也就是模具上做改变，然后就会作用到所有的对象（铁锅）上。这里类似于上面CSS中的外联样式。而这里的模子就是所谓的原型（prototype），如果要做所有的对象都做改变，就将改变对象的原型，即对象的模具，同时原型也是对象的引用。
为了让上面的几句话更好理解，看下面两个例子：
示例1：
<script>
var arr1 = new Array(1,2,3,4,5,6,7,8,9,10);
var arr2 = new Array(8,9,10);
arr1.sum = function(){//类似于加行间样式，只会作用在一个对象上
var sum = 0;
for(var i = 0; i < this.length; i++){
sum += this[i];
}
alert(sum);
}
arr1.sum();//55
arr2.sum();//会报错：arr2.sum is not a function
</script>
示例2：
<script>
var arr1 = new Array(1,2,3,4,5,6,7,8,9,10);
var arr2 = new Array(8,9,10);
Array.prototype.sum = function(){//类似于css的class属性
var sum = 0;
for(var i = 0; i < this.length; i++){
sum += this[i];
}
alert(sum);
}
arr1.sum();//55
arr2.sum();//27
</script>
工厂方式创建对象：这个工厂不是设计模式中的工厂，而是说他生产对象的过程和工厂里面生产产品的过程类似
<script>
function createPerson(name){//构造函数
//找到原料
var obj = new Object(); //进行加工
obj.name = name;
obj.showName = function(){
alert(this.name);
} //出厂
return obj;
} var p1 = createPerson("AAAAA");
var p2 = createPerson("BBBBB");
p1.showName();//AAAAA
p2.showName();//BBBBB alert(p1.showName == p2.showName);//false
</script>
上面的代码，从运行结果可以看出，虽然p1和p2都有showName方法，但是这两个方法是不同的，也就是说，如果有1000个person的对象，用这种方法创建对象，系统就会保存2000个showName方法，但是，我们都知道，这2000个showName方法应该是一样的，不然就太浪费资源了。
用过其他语言看到这种方式也挺别扭，因为其他语言中创建对象会使用new关键字。
js中也支持使用new关键字来创建对象，new后面可以加一个类，如Array，Date....还可以加函数funcName，使用new加函数名的用法，其实和直接使用函数来返回对象是一样的。只不过使用new的时候，会偷偷的找到原料，然后在偷偷地出厂，也就是说，如果使用new创建对象时，我们可以省略这两个步骤，其他的没有什么改变，仍旧存在上面那个1000个对象，2000个showName方法的问题。示例如下：
<script>
function createPerson(name){
//系统自动（偷偷地）找到原料
//var obj = new Object(); //进行加工
//既然是系统自动找原料（生成一个Object对象），那么就要用this指代默认创建的对象。
this.name = name;
this.showName = function(){
alert(this.name);
} //系统自动（偷偷地）出厂
//return obj;
} var p1 = new createPerson("AAAAA");
var p2 = new createPerson("BBBBB");
p1.showName();//AAAAA
p2.showName();//BBBBB alert(p1.showName == p2.showName);//false
</script>
上面的那个使用new来创建对象的做法中，createPerson就是一个类，而p1，p2就是对象，所以类似于var date = new Date()的形式，那么我们就可以对createPerson的原型（prototype）进行操作，让所有的由该类实例化的对象都拥有一样的属性或者方法，并且他们还都是一样，不会出现1000个对象，2000个showName方法的情况。
示例：
<script>
function createPerson(name){
this.name = name;
}
createPerson.prototype.showName = function(){
alert(this.name);
}
var p1 = new createPerson("AAAAA");
var p2 = new createPerson("BBBBB");
p1.showName();//AAAAA
p2.showName();//BBBBB alert(p1.showName == p2.showName);//true
</script>
call()
任意一个函数名后面都可以加一个call()，call()中不加参数的时候，调用的是原函数，如果传一个参数，那么传递的参数就会替换掉函数中的this。如果函数需要传入参数，那么call()的第一个参数为要替代的this，后面才是函数真正的参数，比如下面的例子：
<script>
function say(){
alert(this)
}
say();//[object Window]
say.call();//[object Window]
say.call(12);//12 传递给call的参数替换掉了say()中的this function speak(name){
alert(name);
}
speak("abc");//abc
speak.call(12);//undefined
speak.call(12,"abx");//abx 12替换掉了speak()中的this，abx是传递给speak的参数
</script>
继承
继承可以借助上面的call()来实现。下面这个例子中，只继承了属性，没有继承方法：
<script>
function Parent(){
this.name = "abc";
}
Parent.prototype.showName = function (){
alert(this.name);
} function Child(){
Parent.call(this); //将Parent中的this替换为Child的对象实例
} son = new Child();
alert(son.name);//abc
son.showName();// wrong: s.showName is not a function
</script>
继承方法可以使用将父类的prototype赋值给子类的prototype，但是注意，原型prototype是一个引用，将父类的prototype赋值给子类的prototype之后，两个类的prototype都执行了同一块内存，即通过其中任意一个类来操作prototype都会影响两个类的prototype，如下面的例子：
<script>
function Parent(){
this.name = "abc";
}
Parent.prototype.showName = function (){
alert(this.name);
} function Child(){
Parent.call(this); //将say中的this替换为speak的对象实例
}
Child.prototype = Parent.prototype;
//prototype为引用，两个prototype的指针指向同一个。 Child.prototype.shutUp = function(){
alert("shut up");
} son = new Child();//创建一个子类对象。
alert(son.name);//abc
son.showName();//abc
son.shutUp();//shut up father = new Parent();//创建一个父类对象
father.shutUp();//shut up
//父类的对象示例也可以调用子类原型中添加的方法，因为prototype是引用
</script>
使用组合继承：
function SuperType(){
this.name = "demo";
this.age = 20;
this.sayAge = function(){
console.log(this.age);
}
}
SuperType.prototype.sayName = function(){
console.log(this.name);
}
function SubType(){
SuperType.call(this);
this.gender = "male";
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayGender = function(){
console.log(this.gender);
}
var ins = new SubType();
console.log(ins.age); //20
console.log(ins.name); //demo
console.log(ins.gender); //male
ins.sayAge(); //20
ins.sayName(); //demo
ins.sayGender(); //male
JavaScript的类、对象、原型、继承、引用的更多相关文章
- 关于js的对象原型继承(一)
javascript中,对象的继承是通过原型去继承. 可以这样理解:js中的对象,包含的除了属性和方法,还有一个最基本的原型__proto__对象.这个原型__proto__指向谁,这个对象就继承谁. ...
- javascript中的对象之间继承关系
相信每个学习过其他语言的同学再去学习JavaScript时就会感觉到诸多的不适应,这真是一个颠覆我们以前的编程思想的一门语言,先不要说它的各种数据类型以及表达式的不同了,最让我们头疼,恐怕就是面向对象 ...
- javascript 创建对象及对象原型链属性介绍
我们知道javascript里定义一个普通对象的方法,如: let obj = {}; obj.num = 1; obj.string = 'string'; obj.func = function( ...
- 深入 JavaScript 中的对象以及继承原理
ES6引入了一个很甜的语法糖就是 class, class 可以帮助开发者回归到 Java 时代的面向对象编程而不是 ES5 中被诟病的面向原型编程. 我也在工作的业务代码中大量的使用 class, ...
- php 数组 类对象 值传递 引用传递 区别
一般的数据类型(int, float, bool)不做这方面的解说了 这里详细介绍一下数组和的类的对象作为参数进行值传递的区别 数组值传递 实例代码: <?php function main() ...
- javascript 构造函数类和原型 prototyp e定义的属性和方法的区别
1.把方法写在原型中比写在构造函数中消耗的内存更小,因为在内存中一个类的原型只有一个,写在原型中的行为可以被所有实例共享,实例化的时候并不会在实例的内存中再复制一份而写在类中的方法,实例化的时候会在每 ...
- JavaScript 创建类/对象的几种方式
在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它允许你通过变量 ...
- [转载]php 数组 类对象 值传递 引用传递 区别
一般的数据类型(int, float, bool)不做这方面的解说了 这里详细介绍一下数组和的类的对象作为参数进行值传递的区别 数组值传递 实例代码: <?php function main() ...
- 【转】javascript 的类，原型，继承的理解
原文: https://www.cnblogs.com/codernie/p/9098184.html ------------------------------------------------ ...
- 关于js的对象原型继承(二)
本章讨论使用new一个构造函数来创建一个对象. 前期知识点说明: 1.prototype是函数的一个属性,每个函数都有一个prototype属性.这个属性是一个指针,指向一个对象.它是显示修改对象的原 ...
随机推荐
- Android的面向组件思想
http://blog.csdn.net/luoxinwu123/article/details/8019547 面向组件思想是在软件规模扩大,复杂度上升的背景下,以面向对象为基础而提出的一种软件设计 ...
- openssl交叉编译记录
本次任务是要完毕嵌入式Linux下对openssl程序的支持. 我的开发环境:ARM9开发板 和 嵌入式Linux操作系统.装有Linux系统(我的是ubuntu9.04)的PC机一台.串口和 ...
- ｉｄｅａ报错：[2016-08-31 09:20:10,763] Artifact xxx:war exploded: Error during artifact deployment.
[2016-08-31 09:20:10,763] Artifact newClassProject1:war exploded: Error during artifact deployment. ...
- Http接口安全整理
1.Http接口安全概述: 1.1.Http接口是互联网各系统之间对接的重要方式之一,使用http接口,开发和调用都很方便,也是被大量采用的方式,它可以让不同系统之间实现数据的交换和共享,但由于htt ...
- 转载 [深入学习C#]C#实现多线程的方式：使用Parallel类
简介 在C#中实现多线程的另一个方式是使用Parallel类. 在.NET4中 ,另一个新增的抽象线程是Parallel类 .这个类定义了并行的for和foreach的 静态方法.在为 for和 fo ...
- go标准库的学习-crypto/des
参考:https://studygolang.com/pkgdoc 导入方式: import "crypto/des" des包实现了DES标准和TDEA算法,参见U.S. Fed ...
- 1226 快速幂 取余运算 洛谷luogu
还记得 前段时间学习二进制快速幂有多崩溃 当然这次方法略有不同 居然轻轻松松的 题目描述 输入b,p,k的值,求b^p mod k的值.其中b,p,k*k为长整型数. 输入输出格式 输入格式: 三个整 ...
- centos7搭建elasticsearch
Elasticsearch:负责日志检索和分析,它的特点有:分布式,零配置,自动发现,索引自动分片,索引副本机制,restful风格接口,多数据源,自动搜索负载等 Logstash:对日志进行收集.过 ...
- jmeter（三）SOAP/XML-RPC Request
项目背景:公司的微信端H5界面新开发了会员注册功能,需要对其进行压力测试 项目目标:需要承受每分钟最少6000的压力 一.建立一个测试计划(test plan) 之前有说过,jmeter打开后会自动生 ...
- GIT 分支管理：创建与合并分支、解决合并冲突
分支就是科幻电影里面的平行宇宙,当你正在电脑前努力学习Git的时候,另一个你正在另一个平行宇宙里努力学习SVN. 如果两个平行宇宙互不干扰,那对现在的你也没啥影响.不过,在某个时间点,两个平行宇宙合并 ...