五、原型（prototype）
1、研究函数对象的原型属性
<!DOCTYPE html>
<html>
<head>
<title>01_研究函数对象的原型属性.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
//原型是函数对象的一个属性(普通对象是没有原型属性的.).
function Hero(){
this.name = "zhangwuji";
this.sayMe = function(){
alert("i am zhangwuji.");
}
}
//调用函数对象Hero的属性和方法:new Hero()
var hero = new Hero();
//调用函数对象Hero的属性或方法时,实际上调用new之后的hero对象.
//alert(hero.name);
//调用函数对象的原型属性,是应该调用Hero对象还是hero对象呢?
//hero.prototype;
Hero.prototype;
</script>
</html>
2、利用原型增加函数对象的属性或方法
<!DOCTYPE html>
<html>
<head>
<title>02_利用原型增加函数对象的属性或方法.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is m
<script type="text/javascript">
// function Hero(){
// this.name = "zhangwuji";
// this.sayMe = function(){
// alert("i am zhangwuji.");
// }
// }
//普通对象
// var hero = new Hero();
//hero.value = "zhouzhiruo";
//利用原型为函数对象增加属性或方法.
//函数对象.prototype.新的属性名 = 新的属性值;
//Hero.prototype.value = "zhouzhiruo";
//alert(hero.prototype.value); //output zhouzhiruo
//alert(hero.value);
// Hero.prototype.sayVal = function(){
// alert("i am zhouzhiruo.");
// }
//
// alert(hero.sayVal());
//利用原型增加的属性和方法与上午说的增加属性和方法的区别?利用原型增加属性和方法更优
//1 定义一个函数对象
function Hero(){
this.name = "zhangwuji";
this.sayMe = function(){
alert("i am zhangwuji.");
}
}
//2 (分散形式)利用原型增加属性和方法
// Hero.prototype.value = "zhouzhiruo";
// Hero.prototype.sayVal = function(){
// alert("i am zhouzhiruo.");
// }
//学习JSON时
// var method = {
// add : function(a,b){
// return a+b;
// }
// }
/*
* (集中方式)将增加属性和方法的内容,集中写在一起
* * 格式:函数对象.prototype = 新的对象
* * 注意:只能先增加,再new对象
* (分散形式)
* * 先new对象和后new对象,没有关系
*/
Hero.prototype = {
value : "zhouzhiruo",
sayVal : function(){
alert("i am zhouzhiruo.");
}
}
//3 new对象
var hero = new Hero();
//4 测试
alert(hero.value);
hero.sayVal();
</script>
</html>
3、函数对象的属性或方法与原型的属性和方法同名
<!DOCTYPE html>
<html>
<head>
<title>03_函数对象的属性或方法与原型的属性和方法同名.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
/*
* 函数对象的属性或方法与原型的属性或方法同名时:
* * 调用的属性和方法,是函数对象的属性和方法
* * 函数对象本身的属性和方法与原型的属性和方法同时存在
* * 函数对象本身的属性和方法的优先级要高于原型上的属性和方法
*/
function Hero(){
this.name = "zhangwuji";
this.sayMe = function(){
alert("i am zhangwuji.");
}
}
//原型增加的属性和方法,到底有没有增加上去呢?
Hero.prototype = {
name : "zhouzhiruo",
sayMe : function(){
alert("i am zhouzhiruo.");
}
}
var hero = new Hero();
alert(hero.name); //output zhangwuji
delete hero.name;
alert(hero.name); //output zhouzhiruo
</script>
</html>
4、利用原型重新定义函数对象
<!DOCTYPE html>
<html>
<head>
<title>04_利用原型重新定义函数对象.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
//定义一个空的函数对象
function Hero(){}
//函数对象的属性和方法,都定义在原型上
Hero.prototype = {
name : "zhangwuji",
sayMe : function(){
alert("i am zhangwuji.");
}
}
</script>
</html>
5、扩展内建对象的属性或方法
<!DOCTYPE html>
<html>
<head>
<title>05_扩展内建对象的属性和方法.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
// //为原型 Array对象增加一个判断的函数
// Array.prototype.inArray = function(color){
// //this指代Array对象
// for(var i = 0, len = this.length; i < len; i++){
// //"==="叫全等号:值和类型;"!=="叫全不等号
// if(this[i] === color){
// return true;
// }
// }
// return false;
// }
//
// //定义一个Array对象
// var a = ["red", "green", "blue"];
//
// //测试
// alert(a.inArray("red")); //true
// alert(a.inArray("yellow")); //false
function inArray(arr,color){
for(var i = 0, len = arr.length; i < len; i++){
//"==="叫全等号:值和类型;"!=="叫全不等号
if(arr[i] === color){
return true;
}
}
return false;
}
var a = ["red", "green", "blue"];
alert(inArray(a,"red")); //output true
/*
* 以上两种写法哪种更好?
* * (更好)一种通过原型扩展内建对象
* * 自定义函数完成需求
* 但是,一般不建议大家使用原型来扩展内建对象.
* * 扩展内建对象这种方式不好.(内建对象是底层提供的,最好不要修改)
* 但是,介绍js库的时候,有prototype.
* * 对于javascript原型这个概念,讨论的是比较激烈?
* * (A)正面,支持这种用法,代表性的是prototype库.
* * (B)反面,不支持.
* 关于利用原型扩展内建对象,了解即可.
*/
</script>
</html>
六、继承
1、利用原型实现继承
<!DOCTYPE html>
<html>
<head>
<title>01_利用原型实现继承.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
function A(){
this.a = "a";
this.sayA = function(){
alert("this is a.");
}
}
var a = new A();
function B(){
this.b = "b";
this.sayB = function(){
alert("this is b.");
}
}
B.prototype = a;
//测试:函数对象B就"继承"了函数对象A
var b = new B();
// alert(b.b);
// b.sayB();
//
// alert(b.a);
// b.sayA();
// b.a = "c";
// b.sayA = function(){
// alert("this is c.")
// }
//
// alert(b.a);
// b.sayA();
// b.c = "c";
// b.sayC = function(){
// alert("this is c.")
// }
//
// alert(b.c);
// b.sayC();
</script>
</html>
2、只继承于原型
<!DOCTYPE html>
<html>
<head>
<title>02_只继承于原型.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
// function A(){
// this.a = "a";
// this.sayA = function(){
// alert("this is a.");
// }
// }
//
// function B(){
// this.b = "b";
// this.sayB = function(){
// alert("this is b.");
// }
// }
//
// B.prototype = A.prototype;
//
// //测试
// var b = new B();
//
// alert(b.a);
// b.sayA();
/******************************************/
// function A(){}
//
// A.prototype = {
// a : "a",
// sayA : function(){
// alert("this is a.")
// }
// }
//
// function B(){}
//
// B.prototype = {
// b : "b",
// sayB : function(){
// alert("this is b.")
// }
// }
//
// B.prototype = A.prototype;
//
// var b = new B();
//
//// alert(b.a);
//// b.sayA();
//
// alert(b.b);
// b.sayB();
/***************************************/
function A(){}
A.prototype = {
a : "a",
sayA : function(){
alert("this is a.")
}
}
function B(){
this.b = "b";
this.sayB = function(){
alert("this is b.");
}
}
B.prototype = A.prototype;
var b = new B();
alert(b.b);
b.sayB();
alert(b.a);
b.sayA();
</script>
</html>
3、解决多函数之间的继承关系
<!DOCTYPE html>
<html>
<head>
<title>03_解决多函数对象之间的继承关系.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
function A(){}
A.prototype = {
a : "a",
sayA : function(){
alert("this is a.")
}
}
function B(){}
//这种方式利用原型为函数对象B增加属性和方法(集中方式)
// B.prototype = {
// b : "b",
// sayB : function(){
// alert("this is b.")
// }
// }
//分散形式
// B.prototype.b = "b";
// B.prototype.sayB = function(){
// alert("this is b.")
// }
/*
* 分析得出这句话出问题了
* * 因为B.prototype多次调用
* * 出现的顺序有关系?谁先定义,谁被覆盖
* * 原型定义属性和方法的形式有关系?没有关系
*/
B.prototype = A.prototype;
// B.prototype = {
// b : "b",
// sayB : function(){
// alert("this is b.")
// }
// }
/*
* 条件:
* * 先实现函数对象B"继承"函数对象A的内容
* * 再利用原型为函数对象B增加属性和方法(分散形式)
*/
B.prototype.b = "b";
B.prototype.sayB = function(){
alert("this is b.")
}
var b = new B();
alert(b.a);
b.sayA();
alert(b.b);
b.sayB();
</script>
</html>
4、普通对象之间的继承
<!DOCTYPE html>
<html>
<head>
<title>04_普通对象之间的继承.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
//对象之间的继承
//该函数接受一个对象并返回它的副本
function extendCopy(p){
var z = {}; //定义一个空的对象z
for(var i in p){ //var i =0 ; i < p.length ; i++
z[i] = p[i]; //都当做数组处理的话，可以理解
}
//uber属性：将p作为z的父级，将z指向p的原型
z.uber = p;
return z;
}
//定义普通对象a，但是对象a不是函数对象
var a = {
name : "a"
}
//暂且将b也当作普通对象来看待
var b = extendCopy(a);
b.toStr = function(){return this.name;};
alert(b.toStr()); //output a
</script>
</html>
