五、原型（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 zhangwujidelete 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")); //falsefunction 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就"继承"了函数对象Avar 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 = {}; //定义一个空的对象zfor(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>