JavaScript高级特征之面向对象笔记
Javascript面向对象
函数
* Arguments对象：
* Arguments对象是数组对象
* Arguments对象的length属性可以获取参数的个数
* 利用Arguments对象模拟函数的重载效果（javascript中不存在函数重载）
变量的作用域
* 全局变量与局部变量
* 全局变量：全局域与函数域（局部域）
* 局部变量：当前函数域
* 全局域与函数域
* 定义局部变量时，不使用"var"，局部变量变成全局变量
* 定义全局变量与局部变量同名时，函数域中只能访问局部变量
匿名函数
没有名的函数
javascript可以将函数作为数据使用。作为函数本体，它像普通的数据一样，不一定要有名字。默认名字的函数被称之为“匿名函数”。例如：
function (a){return a;}
匿名函数的两种用法：
可以将匿名函数作为参数传递给其他函数。这样，接收方函数就能利用所传递的函数来完成某些事情。
可以定义某个匿名函数来执行某些一次性任务
回调函数
把一个函数作为参数传递给另一个函数，而作为参数的函数叫做回调函数
function add(a, b){
return a() + b();
}
var one = function(){return 1;}
var two = function(){return 2;}
alert(add(one,two)); //output 3
//可以直接使用匿名函数来替代one()和two()，以作为目标函数的参数
alert(add(function(){return 1;}, function(){return 2;}));
在这个例子中，函数one和two都是回调函数。
当将函数A传递给函数B，并由B来执行A时，A就成了一个回调函数（callback function）。如果A还是一个无名函数，就称之为匿名回调函数。
回调函数的优点：
它可以在不做命名的情况下传递函数（这意味着可以节省全局变量）。
可以将一个函数调用操作委托给另一个函数（这意味着可以节省一些代码编写工作）。
回调函数也有助于提升性能。(重要)
下面的代码，利用回调函数如何优化？
//该函数通过一个循环将其所接收的三个参数分别乘以2，并以数组的形式返回结果
function two(a, b, c){
var i, arr = [];
for(i = 0;i <; i++){
arr[i] = arguments[i] * 2;
}
return arr;
}
//将接收的参数加一后返回
function addone(a){
return a + 1;
}
//测试上面的两个函数
alert(two(1, 2, 3)); //output [2, 4, 6]
alert(addone(100)); //output 101
//将三个数据在两个函数之间传递
var myarr = [];
myarr = two(10, 20, 30);
for(var i = 0; i < 3; i++){
myarr[i] = addone(myarr[i]);
}
alert(myarr); //output [21, 41, 61]
/*
* 以上代码可以工作，但是显然不够优化。
* 这里使用了两次循环。如果处理的数据量很大火循环操作很复杂的话，开销一定不小。
*/
//优化之后的代码(修改two函数)
function two(a, b, c, callback){
var i, arr = [];
for(i = 0;i < 3; i++){
arr[i] = callback(arguments[i] * 2);
}
return arr;
}
myarr = two(1, 2, 3, addone);
alert(myarr); //output [3, 5, 7]
//还可以使用匿名函数来替代addone函数
myarr = two(1, 2, 3, function addone(a){return a + 1;});
回调函数.html
自调函数
定义即调用
第一个小括号：封装函数
第二个小括号：调用函数（传参）
自调函数
自调函数 —— 其实就是在定义函数后自行调用。例如：
(
function(){
alert("javascript");
}
)()
第一对括号，放置的是一个匿名函数。
第二对括号的作用，是“立即调用”。
自调函数只需：将匿名函数的定义放进一对括号中，然后外面再跟一对括号即可。 function(name){
alert("Hello " + name + "!");
}
)("javascript")
//output Hello javascript!
第一个括号中的匿名函数接受一个参数。
第二个括号，在调用时，向匿名函数传递参数内容。
自调函数.html
内部函数
Java中的内部类，提高安全性
内部（私有）函数
function a(param){
function b(input){
return input * 2;
};
return "The result is " + b(param);
} alert(a(2)); //The result is 4
当调用全局函数a ( ) 时，本地函数b ( ) 也会在其内部被调用。由于b ( ) 是本地函数，
它在a ( ) 以外的地方是不可见的，所以将b 称之为私有函数。
私有函数的优点：
有助于确保全局名字空间的纯净性（这意味着命名冲突的机会很小）。
私有性 —— 只将一些必要的函数暴露给“外面世界”，并保留属于自己的函数，使它们不为该应用程序的其他部分所用。
内部函数.html
返回函数的函数
<!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">
/*
* 内部(私有)函数(Java里内部类)
* * 保证了私有性 —— 外部不能访问不到(提供了安全性)
*/
// function fn(){
// var a = "a";
//
// function n(){
// var b = "b";
//
// alert(a+b); //output ab
// }
//
// return n();
// }
//
// fn(); //output ab /*
* (了解)返回函数的函数(内部函数的一种特殊用法)
* * 可以在全局域中,访问到局部变量的值
* * 定义一个函数时,最终执行两个逻辑代码块
*/
function fn(){
//逻辑代码块
var a = "a"; return function(){
//逻辑代码块
return a;
}
} alert(fn()); //output function(){return a;} //var fun = fn();
//var fun = function(){return a;} //alert(fun()); //output a alert(fn()()); //output a /*
* javascript中的特殊函数,不是必要使用的内容
* * 第一次完成实现逻辑内容时,很少会用到特殊函数
* * 在做代码优化的时候,会使用特殊函数
*
* 代码实现:一次性做到代码最优
* * 实现逻辑内容
* * 代码优化
*/ </script>
</html>
返回函数的函数.html
作用域链
javascript不存在大括号级的作用域，但具有函数作用域。
在函数内定义的变量在函数外是不可见的。但如果该变量是在某个代码块中定义的（如在某个if或for语句中），它在代码块外是可见的。 var a = 1;
function f(){
var b = 2;
return a;
} alert(f()); //output 1
alert(b); //output b is undefined 变量a 是属于全局域的，变量b 的作用域是属于函数f ( ) 内。
在f ( ) 内，a 和b 都是可见的。
在f ( ) 外，a 是可见的，b 则是不可见的。 var a = 1;
function f(){
var b = 2;
function n(){
var c = 3;
alert(a); //output 1
alert(b); //output 2
alert(c); //output 3
}
return n();
}
f(); 函数n ( ) 可以访问的变量可以是自身的作用域，也可以是其“父级”的作用域。这就形成了一条作用域链
function f1(){
var a = 1;
f2();
}
function f2(){
return a;
} alert(f1()); //output a is undefined 在定义函数f1 ( ) 和f2 ( ) 时，只能访问全局作用域和其自身的作用域。
在定义函数f2 ( ) 时，变量a 是不可见的。 var a = 5;
function f1(){
var a = 1;
f2();
}
function f2(){
return a;
} alert(f1()); //output 5 在定义函数f1 ( ) 和f2 ( ) 时，都是可以访问全局作用域的。
作用域链.html
闭包：
定义：
指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。
闭包的实现：
var b;
function a(){
var a = "a";
b = function(){
return a + "b";
}
return a;
} //测试
alert(a()); //output a
alert(b()); //output ab
闭包的实现
在a ( ) 函数中定义了 b ( ) 函数，所以b ( ) 函数可以访问a ( ) 函数的作用域。
将 b ( ) 函数升级到全局函数，但依然保留可以对a ( ) 函数作用域的访问权。
function f(){
var a = [];
var i;
for(i = 0; i <; i++){
a[i] = function(){
return i;
}
}
return a;
}
var fun = f();
alert(fun[0]()); //output 3
alert(fun[1]()); //output 3
alert(fun[2]()); //output 3
循环中的闭包1
按照预期，最终结果应该输出 [0 , 1 , 2 ]，但是却是[ 3 , 3 , 3 ]。
在函数 f ( ) 中，我们通过循环，创建了三个闭包，它们都指向了共同的局部变量 i 。
但是，闭包并不会记录它们的值，它们所拥有的只是一个 i 的连接（即引用），因此只能返回i 的当前值。
function f(){
var a = [];
var i;
for(i = 0; i <; i++){
a[i] = (function(x){
return x;
})(i);
}
return a;
}
var fun = f();
alert(fun[0]); //output 0
alert(fun[1]); //output 1
alert(fun[2]); //output 2
循环中的闭包2
在这里，我们不再直接创建一个返回i 的函数，而是将i 传递给了一个自调函数。
在该自调函数中，i 就被赋值给了局部变量x ，这样一来，每次迭代中的x 就会拥有各自不同的值了。
function f(){
function n(x){
return x;
}
var a = [];
var i;
for(i = 0; i <; i++){
a[i] = n(i);
}
return a;
}
var fun = f();
alert(fun[0]); //output 0
alert(fun[1]); //output 1
alert(fun[2]); //output 2
循环中的闭包3
上面这种，是不使用自调函数的用法。
对象：
* 定义对象：
* 普通对象
* new Object()
* var 对象名 = {
属性名 : 属性值,
方法名 : function(参数){}
}
<!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">
//1 在javascript中,底层存在Object对象:Object对象应该所有对象的父级.
var obj1 = new Object(); //2 JSON的key/value格式,Java中的Map集合
var ob2 = {}; //3 在javascript中,函数即对象:函数对象(我起的)
function obj3(){} </script>
</html>
如何定义对象
<!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">
//定义普通对象的属性和方法(JSON的key/value格式)
var hero = {
name : "zhangwuji",
sayMe : function(){
alert("i am zhangwuji.");
}
} //定义函数对象的属性和方法
function Hero(){
this.name = "zhangwuji";
this.sayMe = function(){
alert("i am zhangwuji.");
}
} /*
* this的用法:
* * 指代DOM对象
* * 指代jQuery对象
* * 指代javascript对象
*/ </script>
</html>
定义对象的属性和方法
函数对象
function 对象名(参数){
this.属性名 = 属性值;
this.方法名 = function(参数){}
}
调用对象：
* 普通对象：
* 调用：
* 第一种：
* 对象名.属性名;
* 对象名.方法名();
* 第二种：
* 对象名['属性名'];
* 对象名['方法名']();
* 增加：
* 对象名.新的属性名 = 新的属性值;
* 对象名.新的方法名 = 新的function(){}
* 修改：
* 对象名.属性名 = 新的属性值;
* 对象名.方法名 = 新的function(){}
* 删除：
* delete 对象名.属性名;
* delete 对象名.方法名; * 函数对象：
* 概念性理解：
* 函数对象的概念，实际上是不存在的
* 函数对象实际上是叫做构造器
* var 对象名 = new 构造器();
* 获取到函数对象(构造器)的属性和方法
* var 对象名 = new 构造器();
* 调用、修改、删除及增加与操作普通对象一致。
<!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">
//普通对象
// var hero = {
// name : "zhangwuji",
// sayMe : function(){
// alert("i am zhangwuji.");
// }
// } //调用普通对象hero的属性和方法
//1
// alert(hero.name);
// hero.sayMe(); //2
// alert(hero['name']);
// hero['sayMe'](); //增加普通对象hero的属性和方法
//hero.value = "zhouzhiruo";
//alert(hero.value);
// hero.sayVal = function(){
// alert("zhangwuji's value is zhouzhiruo.");
// }
// hero.sayVal(); //修改普通对象hero的属性和方法
//hero.name = "zhouzhiruo";
//alert(hero.name);
// hero.sayMe = function(){
// alert("i am zhouzhiruo.")
// }
// hero.sayMe(); //删除普通对象hero的属性和方法
// delete hero.name;
// alert(hero.name); // delete hero.sayMe;
// hero.sayMe(); /*
* 函数对象:类似于Java中的类的概念
* * 实际上,是不存在函数对象的概念的(是我们自己起的名)
* * 函数对象实际上是叫做构造器
*/
function Hero(){
this.name = "zhangwuji";
this.sayMe = function(){
alert("i am zhangwuji.");
}
} /*
* 调用之前,必须要先new对象
* * 这里的写法是构造函数的写法
* * hero也是javascript对象,是一个普通对象
*/
var hero = new Hero(); //调用函数对象Hero的属性和方法
// alert(hero.name);
// alert(hero['name']); // hero.value = "zhouzhiruo";
// alert(hero.value); // delete hero.name;
// alert(hero.name); hero.name = "zhouzhiruo";
alert(hero.name); // class A(){
// String name = "zhangwuji";
// }
//
// A a = new A();
// a.name </script>
</html>
调用对象的属性和方法
<!DOCTYPE html>
<html>
<head>
<title>04_this的用法.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">
/*
* this的用法:
* * 指代DOM对象(常用)
* * 指代JQuery对象(最不常用)
* * 指代javascript对象(居中)
*
* this的实际用法,不止以上三种.
*/
//1 指代DOM对象
// document.getElementById("ok").onclick = function(){
// this.value;
// } //2 指代jQuery对象:在jQuery的插件中使用
$.each(this,function(){
alert(this.value);
}); //3 指代javascript对象:只要在函数对象中,使用this的话,this永远都指代函数对象
function Hero(){
this.name = "zhangwuji";
this.sayMe = function(){
alert("hello "+this.name);
}
} var hero = new Hero(); hero.sayMe(); </script>
</html>
this的用法
内建对象：
* 数据封装类对象
* String、Array、Number等
* 工具类对象
* Date、Math等
* 错误类对象
* Error、异常对象等
* 在javascript中，只有对象（变量、方法、集合等）
* javascript是更纯粹的面向对象
<!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">
//定义一个字符串
var str = "aaaa";
//定义一个数值
var i = 7;
//定义一个数组
var arr = [1,2,3,4,5]; /*
* 这些所谓的常用类型,可以直接使用
* * 这种方式类似于Java中JDK提供的常用类型
* * 说明在javascript的底层,提供了类似的常用类型
*
* javascript的内建对象:Java中的API提供的常用类型
* * javascript内建对象:帮助文档"w3school.chm"
* * javascript的内容并不像java一样,具有完整的帮助文档.(javascript没有完整的帮助文档)
*/ </script>
</html>
内建对象
Array：
<!DOCTYPE html>
<html>
<head>
<title>02_Array对象.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">
//以下两种写法是等价的
var arr1 = [];
var arr2 = new Array(); alert(typeof arr1); //object
alert(typeof arr2); //object //Array对象的属性
//1 length属性:获取数组长度
//alert(arr1.length); //2 index和input属性,放弃的 //3 constructor属性:返回对创建此对象的数组函数的引用。(不研究) //4 prototype属性:使您有能力向对象添加属性和方法。(现在不研究,统一放在原型的内容) //Array对象的方法
//1 toString()方法:把数组转换为字符串，并返回结果。 //2 join()方法:把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 //3 pop()和push()方法:删除并返回数组的最后一个元素；向数组的末尾添加一个或更多元素，并返回新的长度。 //4 reverse()方法:颠倒数组中元素的顺序。 //javascript的内建对象的属性和方法,在Java中的JDK的内容,都有类似的内容 //反转字符串示例(面试题) //定义一个字符串
var str = "abcdefg";
//利用String对象的split()方法，将字符串切割成一个数组
var arr = str.split("");
//利用Array对象的reverse()方法，将数组中元素的顺序颠倒。
arr = arr.reverse();
//测试打印
alert(arr.toString()); //Java的版本至少在1.5版本以上 </script>
</html>
Array对象
String：
<!DOCTYPE html>
<html>
<head>
<title>03_String对象.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">
//以下两种写法不是等价的(面试)
var str1 = "aaa";
// var str2 = new String("aaa");
//
// alert(typeof str1); //string
// alert(typeof str2); //object //String对象的属性
//length属性:字符串的长度(字符的个数)
//alert(str1.length); //3 //String对象的方法
//1 substr():从起始索引号提取字符串中指定数目的字符。
//2 substring():提取字符串中两个指定的索引号之间的字符。 //3 split():把字符串分割为字符串数组。 //4 replace():替换与正则表达式匹配的子串。 //判断字符串是否包含指定字符串示例 //定义两个要判断的字符串
var str = "abcdefg";
var substr = "xyz"; function sub(str,substr){
//将判断的字符串定义成String对象
var string = new String(str); //不必要,更规范一些
//截取判断的字符串
var result = string.substr(string.indexOf(substr),substr.length); if(result==substr){
return true;
}else{
return false;
}
} alert(sub(str,substr)); </script>
</html>
String对象
Events对象：
<!DOCTYPE html>
<html>
<head>
<title>04_Events对象.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">
/*
* Event:事件
* Events对象:事件对象
* * 在javascript中,具有事件的.
* onclick\ondblclick\onchange等
* * 事件对象与之前使用的事件内容,是否存在关系?
* 之前使用的事件内容,其实是javascript中事件对象的属性.
*/ </script>
</html>
Events对象
Functions对象
<!DOCTYPE html>
<html>
<head>
<title>05_Functions对象.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">
/*
* Functions对象:javascript全局对象
* * 全局属性:
* * NaN:表示不是一个数值
* * undefined:未定义
* * 全局方法
* * decodeURI():解码某个编码的 URI。
* * encodeURI():把字符串编码为 URI。
* * escape():对字符串进行编码。
* * eval():计算 JavaScript 字符串，并把它作为脚本代码来执行。
* * isNaN():检查某个值是否是数字。返回值为Boolean值,true不是数字.
*
* Functions对象与Function对象:是不是一个?
* * Function对象实际上,浏览器内核中集成的javascript引擎里.
* * 对于Function对象,我们只需要了解new Function()定义函数即可.
*/ </script>
</html>
Functions对象.html
Object对象：
<!DOCTYPE html>
<html>
<head>
<title>01_Object对象.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">
//以下两种写法是等价的(面试题)
var obj1 = new Object();
var obj2 = {}; //Object对象是所有javascript对象的父级. //面试题(真实)
//判断以下哪个描述是错误的?D
// var a = {}; //定义对象
// var b = []; //定义数组
// var c = //; //定义正则表达式
// var d = (); //面试题(百度)
//alert():提示框,在提示框中实现换行
alert("xxx\nyyy"); </script>
</html>
Object对象.html
更多参考W3cSchool帮助文档
原型(prototype)
及其重要(作用)
* 定义：原型就是一个函数对象的属性。（记住是函数对象function XXX{ name：xxx...... }）
* 作用：
* 利用原型为函数对象增加属性和方法
<!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>
研究函数对象的原型属性.html
<!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>
利用原型增加函数对象的属性或方法.html
* 函数对象的属性或方法与原型的属性或方法同名时:
* 函数对象本身的属性和方法的优先级要高于原型上的熟悉感和方法
* 利用函数对象的属性和方法重写原型上的属性和方法
<!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>
函数对象的属性或方法与原型的属性和方法同名.html
<!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>
利用原型重新定义函数对象.html
* 内建对象(应该都是函数对象)：都有prototype属性
* 可以扩展内建对象的属性和方法
<!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>
扩展内建对象的属性和方法.html
继承
定义：如果两个类都是同一个实例的类型，那么它们之间存在着某些关系，我们把同一个实例的类型之间的泛化关系称为“继承”。
如果两个类都是同一个实例的类型，那么它们之间存在着某些关系，我们把同一个实例的类型之间的泛化关系称为“继承”。
继承关系至少包含三层含义：
子类的实例可以共享父类的方法。
子类可以覆盖父类的方法或扩展新的方法。
子类和父类都是子类实例的“类型”。
在javascript中，并不支持“继承”。也就是说，javascript中没有继承的语法。从这个意义上来说，javascript并不是直接的面向对象语言。
* 问题：
* 在javascript中，是不存在继承的关系的（关键字 extend）！
* 在javascript中，没有类的概念。
* javascript就不是一个直接的面向对象语言。
* "继承"：
* javascript中函数对象与函数对象之间的继承。
<!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>
利用原型实现继承.html
<!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>
只继承于原型.html
<!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>
解决多函数对象之间的继承关系.html
原型链
原型链是ECMAScript标准制定的默认继承方式。
function A(){
this.name = "a";
this.toString = function(){return this.name};
}
function B(){
this.name = "b";
}
function C(){
this.name = "c";
this.age = 18;
this.getAge = function(){return this.age};
} B.prototype = new A();
C.prototype = new B();
将对象直接创建在B对象的prototype属性中，并没有去扩展这些对象的原有原型。
通过new A ( ) 另创建了一个新的实体，然后用它去覆盖该对象的原型。
javascript是一种完全依靠对象的语言，其中没有类（class）的概念。
因此，需要直接用new A ( ) 创建一个实体，然后才能通过该实体的属性完成相关的继承工作。
完成这样的继承实现之后，对 A ( ) 所进行的任何修改、重写或删除，都不会对 B ( ) 产生影响。 只继承于原型：
function A(){}
A.prototype.name = "a";
A.prototype.toString = function(){return this.name}; function B(){}
B.prototype = A.prototype;
B.prototype.name = "b"; function C(){}
C.prototype = B.prototype;
C.prototype.name = "c";
C.prototype.age = 18;
C.prototype.getAge = function(){return this.age}; 对象之间的继承（扩展内容，可以不会）（浅复制）
//该函数接受一个对象并返回它的副本
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",
toStr : function(){return this.name;}
}
//定义对象b，但是对象b不是函数对象
var b = extendCopy(a);
b.name = "b";
b.toStr = function(){return this.uber.toStr() + " , " + this.name;};
//定义对象c，但是对象c不是函数对象
var c = extendCopy(b);
c.name = 18; alert(c.toStr()); //output a , b , 18
原型链
* (了解)javascript中的普通对象之间，是否也存在"继承"关系呢?存在
<!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>
普通对象之间的继承.html
JavaScript高级特征之面向对象笔记的更多相关文章
- JavaScript高级特征之面向对象笔记二
Prototype 1. 当声明一个函数的时候,浏览器会自动为该函数添加一个属性prototype, 2. 该属性的默认值为{} 3. 可以动态的给prototype增加key和value值 4 ...
- 《JavaScript高级程序设计》学习笔记(5)——面向对象编程
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第六章内容. 1.面向对象(Object ...
- 《JavaScript高级程序设计》学习笔记12篇
写在前面: 这12篇博文不是给人看的,而是用来查的,忘记了什么基础知识,点开页面Ctrl + F关键字就好了 P.S.如果在对应分类里没有找到,麻烦告诉我,以便尽快添上.当然,我也会时不时地添点遗漏的 ...
- 《JavaScript高级程序设计》读书笔记--前言
起因 web编程过程使用javascript时感觉很吃力,效率很低.根本原因在于对javascript整个知识体系不熟,看来需要找些书脑补一下,同时欢迎众网友监督. 大神推荐书籍 看了博客大神们推荐的 ...
- 《JavaScript高级程序设计》学习笔记
系统学习JS, 从<JavaScript高级程序设计>入门,通过学习jQuery或者angularJS源码来进阶. 第1章 JavaScript简介 1.JS问世的目的是处理以前由服务器端 ...
- 《Javascript高级程序设计》读书笔记之对象创建
<javascript高级程序设计>读过有两遍了,有些重要内容总是会忘记,写一下读书笔记备忘 创建对象 工厂模式 工厂模式优点:有了封装的概念,解决了创建多个相似对象的问题 缺点:没有解决 ...
- JavaScript高级程序设计（读书笔记）（一）
本笔记汇总了作者认为“JavaScript高级程序设计”这本书的前七章知识重点,仅供参考. 第一章 JavaScript简介 JavaScript发展简史: 1995年,JavaScript诞生 19 ...
- JavaScript高级程序设计（读书笔记）之函数表达式
定义函数的方式有两种:一种是函数声明,另一种就是函数表达式. 函数声明的一个重要特征就是函数声明提升(function declaration hoisting),意思是在执行代码前会先读取函数声明. ...
- 《JavaScript高级程序设计》学习笔记(4)——引用类型
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第五章内容. 在ECMAScript中, ...
随机推荐
- C9300升级-USB
1.show ver查看设备的版本 2.一些版本信息的参考 3.准备USB查看其具备的镜像命令:dir usbflash0: 4.复制镜像到设备命令:copy usbflash0:cat9k_iosx ...
- ISE-Backup Data Type
Cisco ISE allows you to back up data from the Primary PAN and from the Monitoring node. Back up can ...
- 转载：initcall
转自:http://blog.chinaunix.net/uid-29570002-id-4387097.html Linux系统启动过程很复杂,因为它既需要支持模块静态加载机制也要支持动态加载机制. ...
- mysql学习笔记（四）：group by，limit,to_days(),from_days()
1. [Err] 1055 - Expression #2 of SELECT list is not in GROUP BY clause and contains nonaggregated co ...
- app内区域截图利用html2Canvals保存到手机 截屏 (html2Canvas使用版本是：0.5.0-beta3。)
app内区域截图利用html2Canvals保存到手机 app内有时候需要区域内的截图保存dom为图像,我们可以使用html2Canvas将dom转换成base64图像字符串,然后再利用5+api保存 ...
- Unity引用System.Windows.Forms遇到的一些坑
这两天在做一个unity打开文件选择框的功能.网上找到两种方法, 第一种是调用win32打开对话框,这个挺好,但是有个致命的问题,没办法多选!!!多选的话返回的是根目录的路径,文件名返回不了,找了半天 ...
- Go标准库之Log
文章引用自 Go语言标准库log介绍 无论是软件开发的调试阶段还是软件上线之后的运行阶段,日志一直都是非常重要的一个环节,我们也应该养成在程序中记录日志的好习惯. log Go语言内置的log包实 ...
- Android学习08
PopupWindow PopupWindow用来实现一个弹出框,可以使用任意布局的View作为其内容,这个弹出框是悬浮在当前activity之上的. 1.弹出框的布局:画一个PopupWindow的 ...
- 消息队列（五）--- RocketMQ-消息存储1
问题 : 部署时如何知道自己是 broker 还是 NameServer topic 订阅信息放在哪里 broker 的作用到底是什么 纪录是如何持久化的 群发的时候,是如何储存消息的 send 方法 ...
- onblur事件和onfocus事件失效
先看onblur事件和onfocus事件的定义: <element onblur="SomeJavaScriptCode"> <element onfocus=& ...