javascript读书笔记_javascript专业读书笔记-CSDN博客

本文链接：https://blog.csdn.net/u010452908/article/details/44138593

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <!-- 
    <<悟透javascript>>
    要理解 javascript, 要得先放下对象和类的概念,回到数据和代码的本源,编程世界只有数据和代码两种基本元素,
    而这两种元素又有着纠缠不清的关系, javascript 就是把数据和代码都简化到最原始的程度;
    
    <[reference:http://www.cnblogs.com/java-my-life/archive/2012/08/06/2625065.html]>
    
    javascript 中有5 中简单数据类型,也为基本数据类型,undefined,null，boolean,number,string 还有一种复杂类型
    Object, Object本质上由一组无序的名值对组成的;
    介于JavaScript是松散类型的，因此需要有一种手段来检测给定变量的数据类型——typeof就是负责提供者方面信息
    的操作符,对一个值使用typeof操作符可能返回下列某个字符串.
    
    任何一个javascript 的标识,常量,变量和参数都只是undefined,null,bool,number,string,object,function 类型中的
    一种,也就是typeof 返回值表明的类型,除此之外没有其它类型了;
    
    所谓"对象化",也就是可以将数据和代码组成复杂结构的能力,javascript 中只有 Object类型和 function 类型提供了
    对象化的能力;
    
    "javascript 没有类",Object就是对象的类型,在javascript 中不管多么复杂的数据和代码,都可以组成Object形式的对象
   -->
   
   <script type="text/javascript">
   generateClass();
   function generateClass()
   {
       var life = {};
       
       for (life.age = 1; life.age <= 3; life.age++)
       {
           switch(life.age)
           {
               case 1: life.body = "卵细胞";
               life.say = function()
               {
                   alert(this.age + this.body);
               };
               break;
               
               case 2: life.tail = "尾巴"; life.gill = "腮"; life.body = "蝌蚪";
               life.say = function()
               {
                  alert(this.age + this.body + this.tail + this.gill);
               };
               break;
               
               case 3: delete life.tail; delete life.gill;
                       life.legs = "四条腿"; life.lung = "肺"; life.body = "青蛙";
               life.say = function()
               {
                  alert(this.age + this.body + this.legs + this.lung);
               };   
               break;     
           };
           
       life.say();
       }
   }
   </script>
  </head>
  
  <body>
    这段 javascript 程序一开始产生了一个声明对象 life,life 诞生时候只是一个光溜溜的对象,没有任何属性和方法
    在第一次生命过程中,它有了一个身体属性 body,并有了一个say 方法,看起来是一个 "卵细胞", 在第二次生命过程
    中, 它又长出了尾巴和腮, 有了tail 和gill 属性,显然它是一个蝌蚪, 在第三次生命过程中, 它的tail 和gill 属性
    消失了, 但又长出了四条腿和肺, 有了legs 和lung 属性,从而变成青蛙.
    
    我们一定需要类吗?
    
    "类",的确可以帮助我们理解复杂的现实世界, 这纷乱的现实世界也的确需要进行分类, 但是如果我们思想被类束缚住
    了,类也就变成了累, 想象一下, 如果一个声明对象开始的时候就被规定成了固定的类, 那么他还能演化吗?
    
    所以,javascript 中没有类,类已经化为无形,与对象融为一体,正是由于放下了类这个概念, javascript 的对象才有了
    其它编程语言所没有的活力;
  </body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'javascriptObject.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	JSON 的形式就是用大括号"{}"号包起来的项目列表,每一个项目间并用逗号","分割,而项目就是用":"分割的属性名
	和属性值,这是典型的字典表示形式,也再次表明了 javascript 里的对象就是字典结构, 不管多么复杂的对象,都可以
	被一句JSON 代码来创建并赋值;
	
	其实,JSON 就是javascript 对象的最好序列化形式,它比xml 更简洁也更省空间,对象可以作为一个json 形式的字符串
	在网络间自由传递和交换信息,而当需要将这个 JSON 字符串变成一个javascript 对象时,只需要使用 eval 函数这个
	强大的数码转换引擎,就立即得到一个javascript 内存对象,正是由于 JSON 的这种简单朴素的天生丽质,才使得她在
	ajax 舞台上成为璀璨夺目的明星;
	
	javascript 就是这样,把面向对象那些看似复杂的东西,用及其简洁的形式表达出来,卸下对象浮华的浓妆,还对象一个
	眉目清晰;
	-->
    <script type="text/javascript">
      // 创建一个没有任何属性的对象:
      var o = {};
      
      // 创建一个对象并设置属性及初始值:
      var person = {name:"angel", age:18, married:false};
      
      // 创建一个对象并设置属性和方法
      var speak = {text:"hello world", say:function(){alert(this.text)}};
      
      // 创建一个更复杂的对象,嵌套其它对象和对象数组等:
      var company =
      {
         name:"Microsoft",
         product:"softwares",
         chairman:{name:"Bill Gates", age:53, Married:true},
         employees:[{name:"angel", age:26, Marrried:false},{name:"Hanson", age:32, Married:true}],
         readme:function(){document.write(this.name + " product " + this.product);}
      };
    
    </script>
  </head>
  
  <body>
    javascript 怎么创建对象? 我们使用了一种称为javascript Object notation (缩写json)的形式,翻译成
    中文,就是javascript 对象表示法;
    json 为创建对象提供了非常简单的方法: 创建一个没有任何属性的对象: var o = {};
  </body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <!-- javascript 函数
    javascript 的代码就只有 function 一种形式, function 就是函数的类型,其它编程语言还有 procedure 或method
    等代码概念, 但是在javascript 里只有 function一种形式, 当我们写下一个函数的时候, 只不过是建立了一个function
    类型的实体而已
    
    javascript 里的代码也是一种数据, 同样可以被任意赋值和修改, 而它的值就是代码的逻辑,只是, 与一般数据不同的是
    函数可以被调用;
    
    javascript 函数的神奇之处还体现在另外两个方面: 一是函数function 类型本身也具有对象化的能力, 二是函数function
    与对象 Object超然的结合能力;
    -->
    <script type="text/javascript">
       function myfunc()
       {
         alert("hello");
       };
       
       alert(typeof(myfunc));
       
       // 这个代码运行之后看到typeof(myfunc) 返回的是function, 以上函数写法称为定义式, 如果我们将其改写为
       // 变量式,就更容易理解javascript了
       var myfunc = function()
       {
         alert("hello-world");
       };
       alert(typeof(myfunc));
       
       // 两种写法等价,我们写javascript 函数只是一个命了名的变量而已,其变量类型为function, 变量的值就是我们
       // 编写的函数体;
       
       // javascript 函数的对象化能力
       // 任何一个函数都可以为其动态添加或去除属性,这些属性可以是简单类型,可以是对象,也可以是其它函数,也就是
       // 说函数具有对象的全部特征, 可以完全把函数当做对象来用, 其实, 函数就是对象,只不过比一般的对象多了一个
       // "()" 操作符,这个操作符用来执行函数的逻辑,即,函数本身还可以被调用,一般对象却不可以被调用,除此之外
       // 完全相同
      var Sing = function()
      {
        with(arguments.callee)
        alert(arguments.callee.author + "：" + arguments.callee.poem);
      };
        Sing.author = "李白";
        Sing.poem = "汉家秦地月，流影照明妃。一上玉关道，天涯去不归";
        Sing();
        Sing.author = "李战";
        Sing.poem = "日出汉家天，月落阴山前。女儿琵琶怨，已唱三千年";
        Sing();
    </script>
  </head>
  
  <body>
    with 的作用 就是 暂时修改作用域链；with(arguments.callee) alert(author + "：" + poem);
    等于alert(arguments.callee.author + "：" + arguments.callee.poem);
    arguments.callee 的作用 就是 返回正被执行的 Function 对象,也就是 例子里的 Sing
    callee 
    返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文。 
    callee 属性是 arguments 对象的一个成员，它表示对函数对象本身的引用，这有利于匿名 
    函数的递归或者保证函数的封装性
  </body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
	<!--
	function 类型的东西都是和 Object 类型一样的东西,都被称为"对象",我们的确可以这样去看待这些"对象"
	因为他们既有属性, 又有方法
	-->
   <script type="text/javascript">
   an_object();
   function an_object()
   {
      var anObject = {}; //一个对象
      anObject.aProperty = "Property of object"; // 对象的一个属性
      anObject.aMethod = function(){alert("Method of object")}; // 对象的一个方法
   
      alert(anObject["aProperty"]); // 可以将对象当作数组,以属性名作为下标来访问属性
      anObject["aMethod"](); //可以将对象当作数组,以方法名作为下标来调用方法
   
      for (var s in anObject) // 遍历对象的所有属性和方法进行迭代化处理
      {
          alert(s + " is a " + typeof(anObject[s]));
      }
   };
   
   an_function();
   function an_function()
   {
     var aFunction = {}; // 一个函数
     aFunction.aProperty = "property of function"; // 函数的一个属性
     aFunction.aMethod = function() {alert("Method of function")}; // 函数的一个方法
     
     alert(aFunction["aProperty"]); // 可以将函数当做数组,以属性名作为下标来访问属性
     aFunction["aMethod"](); // 可以将函数当做数组,以方法名作为下标来调用方法
     
     for (var s in aFunction) // 遍历函数的所有属性和方法进行迭代化处理
     {
       alert(s + " is a " + typeof(aFunction[s]));
     }
   };
   </script>
  </head>
  
  <body>
    是的,对象和函数可以像数组一样,用属性名或方法名作为下标来访问并处理,那么,它到底应该算是数组呢还是对象?
    
    数组应该算是线性数据结构,线性数据结构一般有一定的规律,适合进行统一的批量迭代操作,有点像波, 而对象是离散
    数据结构,适合描述分散和个性化的东西,有点像粒子,因此可以这样问: javascript 里的对象到底是波还是粒子?
    
    如果存在对象量子论,那么答案为: 波粒二象性!
    
    javascript里的函数和对象既有对象的特性也有数组的特性, 这里的数组被称为字典, 一种可以任意伸缩的名称值对
    其实 function 和object 的内部实现就是一个字典结构, 但是这种字典结构却通过严谨而精巧的语法表现出了丰富
    的外观,正如量子力学在一些地方用粒子来解释和处理问题,而在另外一个地方却用波来解释和处理问题,我们也可以在
    需要的时候,自由选择用对象还是数组来解释和处理问题,只要善于把握 javascript 这些奇妙特性,就可以编写很多简洁
    而强大的代码来.
  </body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	从下面的代码可以看出,同一个函数可以从不同角度来调用,this 并不一定是函数本身所属的对象
	this 只是在任意对象和function 元素结合时的一个概念, 是种结合比一般对象语言的默认结合更加
	灵活,显得更加的超然和洒脱;
	
	在javascript 中,你只能把this 看成当前要服务的这个对象,this 是一个特殊的内置参数,根据this 参数
	可以访问"这个对象的属性和方法",但却不能给 this参数赋值,在一般对象语言中,方法体代码中的this 是
	可以省略的,成员默认都首先是"自己"的, 但是javascript 却不同,由于不存在"自我",当访问这个对象对象
	时候,this不可省略;
	
	javascript 提供了传递this 参数的多种形式和手段,其中,像BillGates.whoAmI();这种形式是传递this 参数
	最正规的形式,此时的this 就是函数所属的对象本身,而大多数情况下,我们也几乎很少去采用那些借花献佛的
	调用形式,但是只要我们明白javascript 的这个"自我" 与其它编程语言的"自我"是不同的,这是一个方向了自我
	的this,这就是javascript 特有的世界观
	-->
   <script type="text/javascript">
   // 此时是this 当前这段代码的全局对象,在浏览器中就是window对象,其name 属性为空字符串,输出I am of object
       whoAmI();
       function whoAmI()
       {
         alert("I am " + this.name + "of " + typeof(this));
       };
   
       var BillGates = {name:"Bill Gates"}; //定义一个对象
       BillGates.whoAmI = whoAmI; // 将whoAmI函数 作为BillGates 的方法
       BillGates.whoAmI();
   
       var SteveJobs = {name:"Steve Jobs"}; //定义一个对象
       SteveJobs.whoAmI = whoAmI;
       SteveJobs.whoAmI();
       
       // 直接将BillGates 作为this,调用whoami,输出I am Bill Gates Object;
       whoAmI.call(BillGates);
       
       // 直接将SteveJobs 作为this, 调用whoAmI,输出 I am Steve Jobs Object;
       whoAmI.call(SteveJobs);
       
       BillGates.whoAmI.call(SteveJobs);
       SteveJobs.whoAmI.call(BillGates);
       
       whoAmI.whoAmI = whoAmI; // 将 whoAmI 函数设置为自身的方法
       whoAmI.name = "qingyuan_huake";
       whoAmI.whoAmI();  // 此时的this 是whoAmI 函数自己,输出: I am whoAmI of function
       
       // 临时创建一个匿名对象并设置属性后调用 whoAmI 方法,输出I am nobody of object
       ({name:"nobody", whoAmI: whoAmI}).whoAmI();
   </script>
  </head>
  
  <body>
    在javascript 中要放下对象:
    在面向对象的编程世界里, 数据与代码的有机结合就构成了对象的概念,自从有了对象,编程世界就被划分为
    两个部分, 一个是对象内的世界, 一个是对象外的世界, 对象天生具有自私的一面, 外面的世界未经允许是
    不可以访问对象内部的,对象也有大方的一面, 它对外提供属性和方法,也为他人服务,在这里, 我要要谈谈
    "对象的自我意识";
     然而, 就在对象将世界划分为内外两个部分的同时,对象"自我"也随之产生,"自我意识"是生命的最基本特征,
     正是由于这种强大的生命力,才使得编程世界充满无限的生机和活力;
     
     但对象的"自我意识"在带给我们快乐的同时也带来了痛苦和烦恼,我们给对象赋予了太多的欲望,总希望他们能
     做更多的事情,然而,对象的自私使得他们相互抢系统资源,对象的自负让对象变得复杂和臃肿,对象的自欺也
     往往带来挥子不去的错误和异常,我们为什么会有这么多的痛苦和烦恼呢?
     
     javascript 中也有this,但是这个this 却与C++,c#,java等语言的this 不同,一般的编程语言的this 就是对象自己
     而javascript 的this却不一定, this 可能是我,也可能是你,可能是它,这就是不鞥用原来的那个"自我"来理解,
     javascript中this的含义了,为此,我们必须首先放下原来对象的那个"自我";
  </body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	<reference:http://blog.sina.com.cn/s/blog_632e1e5e0100j6il.html>
	{javascript中call、apply、argument、callee、caller }
	-->
    <script type="text/javascript">
    // 除了json 外,在 javascript 中我们还可以使用new 操作符结合一个函数的形式来创建对象
    function myFunc(){}; //定义一个空函数
    var anObj = new myFunc(); //使用new 操作符, 借助myFunc 函数,就创建一个对象F
    
    // 如何理解这种创建方式, 可以把上面的代码改写成等价形式
    function myFunc(){};
    var anObj = {};
    // 将anObj 对象作为this 指针调用myFunc 函数
    myFunc.call(anObj);
    
    // javascript 构造函数:
    function Person(name) // 带参数的构造函数
    {
       this.name = name;
       // 给this 对象定义一个sayHello方法
       this.sayHello = function(){alert("hello, i'am " + this.name);}
    
    }
    
    function Employee(name, salary) //子构造函数
    {
       Person.call(this,name); // 将this 传递给父构造函数
      this.salary = salary; // 设置一个this 的salary 属性 
      this.showMeTheMoney = function(){alert(this.name + " $ " + this.salary);};
    };
    
    var BillGates = new Person("Bill Gates"); //用person 构造函数创建Bill Gates对象
    var steveJobs = new Employee("steve Jobs", 1234); //用Employee 构造函数创建SteveJos 对象
    
    BillGates.sayHello();
    steveJobs.sayHello();
    steveJobs.showMeTheMoney();
    </script>
  </head>
  
  <body>
    This is my JSP page. <br>
  </body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'prototype4.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	相比静态对象语言更神奇的是,我们可以随时给原型对象动态添加新的属性和方法,从而动态地扩展
	基类的功能特征,这在静态语言中是很难想象的:
	-->
   <script type="text/javascript">
   function Person(name)
   {
     this.name = name;
   };
   
   Person.prototype.sayHello = function() //建立对象之前定义的方法
   {
      alert("hello, I am " + this.name);
   };
   
   var BillGates = new Person("BillGates"); //建立对象
   BillGates.sayHello();
   
   Person.prototype.Retire = function() //建立对象后再动态扩展原型的方法
   {
      alert("poor" + this.name + ", byebye");
   };
   BillGates.Retire(); //动态扩展的方法即可以被先前建立的对象立即调用
   
   // 如果在javascript 内置的那些如Object 和function 等函数的prototype上添加些新的方法和属性
   // 就能扩展javascript 的功能了
   
   // Microsoftajax.debug.js
   // 给内置String 函数的prototype 扩展了一个trim 方法,于是所有的String 类对象都有了trim 方法
   String.prototype.trim = function String$trim()
   {
       if(arguments.length != 0) throw Error.parameterCount();
       return this.replace(/^\s+|\s+$/g, '');
   };
   </script>
  </head>
  
  <body>
  
  </body>
</html>