请选择 进入手机版 | 继续访问电脑版

技术控

    今日:13| 主题:54628
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] javascript笔记基础总结篇

[复制链接]
情歌萌物 发表于 2016年10月2日 21:37
230 3

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Created at 2016-09-24 Updated at 2016-10-02  CategoryFront-End   TagJavascript  
   转载请声明出处博客原文
  随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧
  第一课时 入门基础

   知识点:

  
       
  • 操作系统就是个应用程序   
  • 只要是应用程序都要占用物理内存   
  • 浏览器本身也是一个应用程序   
  • 浏览器本身只懂得解析 HTML   
  • 调用浏览器这个应用程序的一个功能绘制  
  1、javascript介绍

  
       
  •   JavaScript 操作 DOM 的本质是=获取+触发+改变
       
  •   目的:就是用来操作内存中的 DOM 节点
           
    • 修改 DOM 节点的属性     
    • 过 javascript 语法组织逻辑代码操作DOM     
    • BOM(window) 它包含了 DOM     
    • DOM(document)     
    • script 脚本推荐放在最下边好处:防止因网络问题,页面加载时间长,出现空白;即便网络问题,浏览器也把 DOM 加载渲染完成,等待从服务端下载完 js 脚本,出现效果     
    • css 不放在最下面原因通俗地讲:好比先穿好衣服在出去,浏览器先把 css 样式准备好,在加载结构层,使得页面有样子;如果放在下面,因为页面是从上往下加载,没有 css ,就剩下裸露的标签,很难看,使得用户体验不好   
       
  2、基于对象的内存管理

  
       
  • javascript 就是来操作这些对象
           
    • 通过逻辑组织对象之间的关系和行为     
    • 如何操作这些对象?通过变量引用   
       
  3、变量

  
       
  • 变量本质是一个空盒子,里面记录了一个内存地址,使能找到内存中的对象,保存了指向具体的实在的东西的地址   
  • 变量存在栈中,对象存在堆中   
  • 变量的意义:方便我们去操作对象   
  • 变量的几种引用方式
           
    • 指针( C 语言中叫法)     
    • 引用( Java )     
    • 变量   
       
  • 例如:
           
    • var b = document.body 含义:把 body 这个对象在内存中的地址放到b变量里面,变量 b ( b 是内存地址的别名)本身也存在内存中,以后的操作是针对 body 这个地址   
       
  
       
  • 变量命名规范
           
    • 由字母( a-zA-Z )数字( 0-9 )下划线( _ )以及美元符号( $ )     
    • 不能由数字开头     
    • 命名尽量用英文并且具有一定的含义     
    • 如果有多个英文单词,后面单词的首字母大写     
    • 不能使用关键字     
    • 首字母不要大写,大写是有特殊含义的   
       
  DOM在内存中的一些图示

   

javascript笔记基础总结篇

javascript笔记基础总结篇-1-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-2-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-3-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-4-技术控-javascript,document,浏览器,应用程序,window

  第二课时

  回顾上节:

  
       
  •   1、 javascript 介绍
       
  • 2、基于对象的内存管理
       
  •   javascript 就是来操作这些对象
           
    • 通过逻辑组织对象之间的关系和行为     
    • 如何操作这些对象?通过变量引用   
       
  • 3、变量  
   知识点:

   1、 window 作用域

  
       
  • 只要在 script 标签中定义的变量,默认就在 window 的作用域之下   
  • 默认就是 window 这个对象里面写代码  
  2、数据类型

  如何判断js中的数据类型:

  
       
  •   typeof 、 instanceof 、 constructor 、 prototype 方法比较
       
  •   如何判断 js 中的类型呢,先举几个例子:
      
  1. vara ="iamstring.";
  2. varb =222;
  3. varc= [1,2,3];
  4. vard =newDate();
  5. vare =function(){alert(111);};
  6. varf =function(){this.name="22";};
复制代码
最常见的判断方法 : typeof

  1. alert(typeofa) ------------> string
  2. alert(typeofb) ------------> number
  3. alert(typeofc) ------------> object
  4. alert(typeofd) ------------> object
  5. alert(typeofe) ------------>function
  6. alert(typeof f) ------------>function
复制代码

       
  • 其中 typeof 返回的类型都是字符串形式,需注意,例如:  
  1. alert(typeofa =="string") ------------->true
  2. alert(typeofa ==String) --------------->false
复制代码

       
  • 另外 typeof 可以判断 function 的类型;在判断除 Object 类型的对象时比较方便。  
   判断已知对象类型的方法 : instanceof

  1. alert(c instanceofArray) --------------->true
  2. alert(d instanceofDate)
  3. alert(f instanceofFunction) ------------>true
  4. alert(f instanceoffunction) ------------>false
复制代码

       
  • 注意 : instanceof 后面一定要是对象类型,并且大小写不能错,该方法适合一些条件选择或分支。  
   根据对象的 constructor 判断 : constructor

  1. alert(c.constructor === Array) ---------->true
  2. alert(d.constructor === Date) ----------->true
  3. alert(e.constructor === Function) ------->true
复制代码

       
  •   注意: constructor 在类继承时会出错
       
  • 例子:
      
  1. functionA(){};
  2. functionB(){};
  3. A.prototype = newB();//A继承自B
  4. varaObj =newA();
  5. alert(aobj.constructor === B) -----------> true;
  6. alert(aobj.constructor === A) -----------> false;
复制代码

       
  • 而 instanceof 方法不会出现该问题,对象直接继承和间接继承的都会报 true :  
  1. alert(aobj instanceofB) ---------------->true;
  2. alert(aobj instanceofB) ---------------->true;
复制代码

       
  • 言归正传,解决 construtor 的问题通常是让对象的 constructor 手动指向自己:  
  1. aobj.constructor = A; //将自己的类赋值给对象的constructor属性
  2. alert(aobj.constructor === A) -----------> true;
  3. alert(aobj.constructor === B) -----------> false;//基类不会报true了;
复制代码
通用但很繁琐的方法 : prototype

  1. alert(Object.prototype.toString.call(a) === ‘[objectString]’) ------->true;
  2. alert(Object.prototype.toString.call(b) === ‘[objectNumber]’) ------->true;
  3. alert(Object.prototype.toString.call(c) === ‘[objectArray]’) ------->true;
  4. alert(Object.prototype.toString.call(d) === ‘[objectDate]’) ------->true;
  5. alert(Object.prototype.toString.call(e) === ‘[objectFunction]’) ------->true;
  6. alert(Object.prototype.toString.call(f) === ‘[objectFunction]’) ------->true;
复制代码

       
  • 大小写不能写错,比较麻烦,但胜在通用。   
  • 通常情况下用 typeof 判断就可以了,遇到预知 Object 类型的情况可以选用 instanceof 或 constructor 方法  
   Javascript的数据类型有六种(ES6新增了第七种 Symbol )

  
       
  • 数值( number ):整数和小数(比如1和3.14)   
  • 字符串( string ):字符组成的文本(比如”Hello World”)   
  • 布尔值( boolean ):true(真)和false(假)两个特定值   
  • undefined :表示 未定义 或不存在,即此处目前没有任何值   
  • null :表示空缺,即此处应该有一个值,但目前为空   
  • 对象( object ):各种值组成的集合   
  • 通常,我们将数值、字符串、布尔值称为原始类型( primitive type )的值,即它们是最基本的数据类型,不能再细分了。而将对象称为合成类型( complex type )的值,因为一个对象往往是多个原始类型的值的合成,可以看作是一个存放各种值的容器。至于 undefined 和 null ,一般将它们看成两个特殊值  
  内存中一共分为几种对象:

  
       
  • 变量   
  • DOM 对象   
  • 常量   
  • 自定义对象  
  数据类型转换

   转换函数

  
       
  • toString() 转换为字符串,在JavaScript中所有数据类型都可以转换为 string 类型  
  1. varn1 =12;
  2. varn2 =true;
  3. vara = [1,2,3];
  4. varo = {};
  5. functionf(){}
  6. n1.toString(); //"12"
  7. n2.toString(); //"true"
  8. a.toString(); //"1,2,3"
  9. o.toString(); //"[object Object]"
  10. f.toString(); //"function f(){}"
复制代码

       
  •   parseInt() 解析出一个 string 或者 number 类型的整数部分,如果没有可以转换的部分,则返回 NaN ( not a number )
    1. alert(typeofa) ------------> string
    2. alert(typeofb) ------------> number
    3. alert(typeofc) ------------> object
    4. alert(typeofd) ------------> object
    5. alert(typeofe) ------------>function
    6. alert(typeof f) ------------>function
    7. 0
    复制代码
           
    • parseFloat() 解析出一个 string 的浮点数部分,如果没有可以转换的部分,则返回 NaN ( not a number )   
    1. alert(typeofa) ------------> string
    2. alert(typeofb) ------------> number
    3. alert(typeofc) ------------> object
    4. alert(typeofd) ------------> object
    5. alert(typeofe) ------------>function
    6. alert(typeof f) ------------>function
    7. 1
    复制代码
      
   强制类型转换

  
       
  • Boolean(value) - 把给定的值转换成 Boolean 型  
  1. alert(typeofa) ------------> string
  2. alert(typeofb) ------------> number
  3. alert(typeofc) ------------> object
  4. alert(typeofd) ------------> object
  5. alert(typeofe) ------------>function
  6. alert(typeof f) ------------>function
  7. 2
复制代码

       
  • Number(value) -把给定的值转换成数字(可以是整数或浮点数)  
  1. alert(typeofa) ------------> string
  2. alert(typeofb) ------------> number
  3. alert(typeofc) ------------> object
  4. alert(typeofd) ------------> object
  5. alert(typeofe) ------------>function
  6. alert(typeof f) ------------>function
  7. 3
复制代码

       
  •   String(value) - 把给定的值转换成字符串
    1. alert(typeofa) ------------> string
    2. alert(typeofb) ------------> number
    3. alert(typeofc) ------------> object
    4. alert(typeofd) ------------> object
    5. alert(typeofe) ------------>function
    6. alert(typeof f) ------------>function
    7. 4
    复制代码

   隐式转换

  
       
  • 数字+字符串:数字转换为字符串 console.log(12+"12") ; //1212   
  • 数字+布尔值: true 转换为 1 , false 转换为 0 console.log(12+true) ; //13   
  • 字符串+布尔值:布尔值转换为true或false console.log("hello"+true) ; // hellotrue   
  • 布尔值+布尔值 console.log(true+true) ; //2  
   null和undefined

  
       
  • undefined 表示一种未知状态,声明了但没有初始化的变量,变量的值时一个未知状态。访问不存在的属性或对象 window.xxx )方法没有明确返回值时,返回值是一个 undefined. 当对未声明的变量应用 typeof 运算符时,显示为 undefined 。   
  • null 表示尚未存在的对象, null 是一个有特殊意义的值。可以为变量赋值为 null ,此时变量的值为“已知状态”(不是 undefined ),即 null 。(用来初始化变量,清除变量内容,释放内存)  
  1. alert(typeofa) ------------> string
  2. alert(typeofb) ------------> number
  3. alert(typeofc) ------------> object
  4. alert(typeofd) ------------> object
  5. alert(typeofe) ------------>function
  6. alert(typeof f) ------------>function
  7. 5
复制代码
3、javascript脚本执行顺序

  
       
  • 第一步定义: 分为 var 定义 和函数定义 function   
  • 第二步执行: 其他所有   
  • 先从上往下定义完所有的后,再从上往下执行 除了 var function 定义外的 其他都是执行 如:赋值 函数调用   
  • 在栈里面找到的,就不去堆里面找,因为栈空间小,就近原则【总之:先在栈里面找,找不到再去堆里面找】在栈里面开辟,就能找到堆里面的地址 如: var b = function(){}  
   总结一下 == 运算的规则:(隐式转换)

  
       
  •   JS 中的值有两种类型:原始类型( Primitive )、对象类型( Object )。
       
  •   原始类型包括: Undefined 、 Null 、 Boolean 、 Number 和 String 等五种。
       
  •   Undefined 类型和 Null 类型的都只有一个值,即 undefined 和 null ; Boolean 类型有两个值: true 和 false ; Number 类型的值有很多很多; String 类型的值理论上有无数个。
       
  •   所有对象都有 valueOf() 和 toString() 方法,它们继承自 Object ,当然也可能被子类重写
       
  •   undefined == null ,结果是 true 。且它俩与所有其他值比较的结果都是 false 。
       
  •   String == Boolean ,需要两个操作数同时转为 Number 。
       
  •   String/Boolean == Number ,需要 String/Boolean 转为 Number 。
       
  •   Object == Primitive ,需要 Object 转为 Primitive (具体通过 valueOf 和 toString 方法)
      
  第三课时

  上节回顾:

  
       
  •   1、 window 作用域
           
    • 只要在 script 标签中定义的变量,默认就在 window 的作用域之下     
    • 默认就是 window 这个对象里面写代码   
       
  • 2、数据类型
           
    • number :数字     
    • string :字符类型,必须用引号引起来     
    • boolean :布尔类型 true false     
    • null :变量引用了一块堆中一个空的空间     
    • object :引用对象类型(存在于堆里面)     
    • array :数组类型     
    • function :函数数据类型   
       
  •   对象数据类型: object , array , function
       
  •   3、 javascript 脚本执行顺序
           
    • 定义 var function     
    • 执行 其他所有   
       
   知识点:

   1、运算符

  
       
  •   算术运算符( + , - , * , / , % , ++ , -- )
           
    • 如果引用所指的地方是 null 的话,那么在运算中就会自动变成 0     
    • % 运算符 如: 4%5 取模 模是 4 7%5 取模 模是 7-5=2   
       
  • 字符串和数字相加的情况:
           
    • 左右都是数字:数字相加     
    • 左右有一个字符串:字符串拼接     
    • 左右边有一个 null : null 看做 0     
    • 左右边有一个 undefined :结果是 NAN ( not is number )   
       
  •   赋值运算符( = , -= , += , *= , /= , %= )
       
  •   比较运算符( == , === , != , > , < , >= , <= )
           
    • 先执行表达式计算再赋值     
    • == 和 != 在比较之前首先让双方的值做隐士类型转换, === 不转换   
       
  •   逻辑运算符( || , && , ! )
           
    • || 在js中和PHP中是不一样的 js中返回逻辑或的左边或右边的一个结果 PHP返回 || 或出来以后的结果即: true false     
    • 特殊性(注意)—一定要记住(这个特性和其他编程语言不一样):在 js 里返回不是布尔值     
    • || 短路运算 第一个条件为真 后面不执行     
    • && 把表达式最后一个值返回(注意这里)   
       
   条件运符( 表达式1?表达式2:表达式3 )三元运算符

  
       
  • 表达式1?表达式2:表达式3 表达式1为真 返回表达式2 否则返回表达式3   
  • 三元运算符 可以多层次嵌套使用  
   2、在js中 有四种被认为是 非 :

  
       
  • undefined   
  • null   
  • false   
  • 0  
  
       
  • 例子: var age = prompt("温馨提示:","请输入您的年龄")||0   
  • 当点击取消的时候,如果出现 undefined null fasle 0 表示非的逻辑 那么 || 就会过滤,取右边的值 0  
  第四课时

   上节回顾:

  
       
  • 1、运算符
           
    • 算术运算符( + , - , * , / , % , ++ , -- )     
    • 如果 + 号左边和右边有一边是字符串类型的数据的话,这个时候就变成字符串拼接     
    • var str = "你好"+123; //你好123     
    • var count = 2;     
    • var str1 = "你叫了我第"-count+"次"; //你叫了我第2次     
    • 如果引用所指的地方是 null 的话,那么在运算中就会自动变成0   
       
  •   2、赋值运算符 *( = , -= , += ,` = , /= , %=`)
       
  •   3、 比较运算符( ==,===,!=,>,<,>=,<= )
           
    • 先执行表达式计算再赋值     
    • == 和 != 在比较之前首先让双方的值做隐士类型转换, === 不转换   
       
  • 4、逻辑运算符( ||,&&,! )   
  • 5、条件运算符( 1>2?3:4 )  
   知识点:

   1、 console.log 调试程序

  
       
  • 开发中大量使用这个 而不用 alert  
   2、条件结构

  
       
  • if  
   javascript 中 if 语句优化写法

  
       
  • 使用常见的三元操作符  
  1. alert(typeofa) ------------> string
  2. alert(typeofb) ------------> number
  3. alert(typeofc) ------------> object
  4. alert(typeofd) ------------> object
  5. alert(typeofe) ------------>function
  6. alert(typeof f) ------------>function
  7. 6
复制代码

       
  • 使用 and(&&) 和 or(||) 运算符  
  1. alert(typeofa) ------------> string
  2. alert(typeofb) ------------> number
  3. alert(typeofc) ------------> object
  4. alert(typeofd) ------------> object
  5. alert(typeofe) ------------>function
  6. alert(typeof f) ------------>function
  7. 7
复制代码

       
  • if...else   
  • if...else if...else   
  • 当通过判断返回某个值的时候,优先使用三元表达式   
  • 当通过判断执行 N 段逻辑代码的时候,只能用条件结构  
  第五课时

   上节回顾:

  
       
  • 1、 console.log 调试程序   
  • 2、条件结构
    if
    if...else
    if...else if...else
           
    • 当通过判断返回某个值的时候,优先使用三元表达式     
    • 当通过判断执行 N 段逻辑代码的时候,只能用条件结构   
       
   知识点:

   1、 switch

  
       
  •   switch case break default 条件 判断 退出 默认
           
    • a.只要匹配上一个 case ,那么它下面的所有的 case 都会执行包括 default     
    • b. break 的意思跳出当前结构   
       
   2、 for

  
       
  • 循环有三个要素
           
    • a.循环变量     
    • b.判断(循环体)     
    • c.改变循环变量     
    • d. continue 的意思结束本次循环进入下次循环   
       
  • continue 结束本次循环,继续下一次循环 当前这次循环不做 直接做下面的   
  • break 结束后面的循环不做了  
  第六课时

   上节回顾:

   1、 switch
  
       
  • switch case break default 条件 判断 退出 默认
           
    • a.只要匹配上一个 case ,那么它下面的所有的 case 都会执行包括 default     
    • b. break 的意思跳出当前结构   
       
   2、 for
  
       
  • 循环有三个要素
           
    • a.循环变量     
    • b.判断条件(循环体)     
    • c.改变循环变量     
    • d. continue 的意思结束本次循环进入下次循环   
       
   知识点:

   1、 while/do...while 没有谁好谁坏 只有适应场景不同

  
       
  • 比如:先吃饭 在买单 do..while 用户体验高 有风险 扫雷游戏也是先体验 在问是否退出 提高体验   
  • 比如:先买单 在吃饭 while 用户体验不高   
  • 一般情况下面,如果条件判断是 数字的 比较 ==<> , for 循环优先.   
  • 如果是 非数值相关的 比较循环, while 优先  
  2、代码内存解析

   闭包

  
       
  • a.程序永远是先定义后执行   
  • b.执行永远从上到下   
  • c.函数定义的话在堆(只是一个地址而已)   
  • d.函数调用的时候,就会有自己的堆和栈( 闭包 )  
   闭包 作用域

  
       
  • 记住:先定义 var function 在从上往下执行   
  • 定义定义在自己的栈里面 执行在自己的堆里面   
  • 运行在运行的环境中   
  • 函数每调用前 只是一个地址   
  • 只要调用一次函数就会动态开辟一块内存 创建一个封闭的空间 在自己的封闭的空间的栈中定义 var 在执行   
  • 函数执行完 里面的东西全部销毁  
  1. alert(typeofa) ------------> string
  2. alert(typeofb) ------------> number
  3. alert(typeofc) ------------> object
  4. alert(typeofd) ------------> object
  5. alert(typeofe) ------------>function
  6. alert(typeof f) ------------>function
  7. 8
复制代码
  1. alert(typeofa) ------------> string
  2. alert(typeofb) ------------> number
  3. alert(typeofc) ------------> object
  4. alert(typeofd) ------------> object
  5. alert(typeofe) ------------>function
  6. alert(typeof f) ------------>function
  7. 9
复制代码
  1. alert(typeofa =="string") ------------->true
  2. alert(typeofa ==String) --------------->false
  3. 0
复制代码
4、object对象

  5、面向对象的程序设计

  
       
  • a. function 构造器   
  • b. prototype 原型   
  • c. foreach   
  • c.作用域   
  • d.继承  
  一些内存图示

   

javascript笔记基础总结篇

javascript笔记基础总结篇-5-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-6-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-7-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-8-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-9-技术控-javascript,document,浏览器,应用程序,window

  原型链的几张图解

   

javascript笔记基础总结篇

javascript笔记基础总结篇-10-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-11-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-12-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-13-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-14-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-15-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-16-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-17-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-18-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-19-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-20-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-21-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-22-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-23-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-24-技术控-javascript,document,浏览器,应用程序,window

  
       
  • 扩展阅读
           
    • Javascript的原型链图详解   
       
  第七课时

   上节回顾:

  
       
  • 1. switch   
  •   2. while/do...while
           
    • 一般情况下面,如果条件判断是数字的比较 ==<> , for 循环优先.     
    • 如果是非数值相关的比较循环, while 优先   
       
  •   3. function 函数
       
  • 4.代码内存解析
           
    • 闭包
              
      • a.程序永远是先定义后执行      
      • b.执行永远从上之下      
      • c.函数定义的话在堆(只是一个地址而已)      
      • d.函数调用的时候,就会有自己的堆和栈(闭包)      
           
       
   知识点:

   1、object对象

  
       
  • new 关键字代表的是新开辟一块内存空间   
  • 没有被引用的内存空间,会在适当的时候被销毁
           
    • 两句代码含义等同
              
      • var person = new Object() ;      
      • var person = {};      
           
       
  •   访问对象的属性除了用 对象引用 .属性 key 以外,还可以使用对象引用 [属性key]
      
  new 原理详细解析

  
       
  • 无论什么时候,只要创建一个新函数,就会根据一组特定的规则为该函数创建一个 prototype 属性,这个属性指向函数的原型对象。   
  • 在默认情况下,所有原型对象都会自动获得一个 constructor (构造函数)属性,这个属性包含一个指向 prototype 属性所在函数的指针(就是指向新创建的函数)。   
  • 通过这个构造函数(原型对象的构造函数),可以继续为原型对象添加其他属性和方法。   
  • 当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象。 ECMA-262 第5版管这个指针叫 [[Prototype]] 。脚本中没有标准的方式访问 [[Prototype]] ,但 Firefox 、 Safari 和 Chrome 在每个对象上都支持一个属性 __proto__ ;而在其他实现中,这个属性对脚本是完全不可见的。不过,要明确的真正重要的一点就是,这个连接存在于实例和构造函数的原型对象之间,而不是存在于实例和构造函数之间  
  new创建对象的步骤

  
       
  • 创建一个新的对象   
  • 将构造函数的作用域赋给新对象   
  • 执行构造函数的代码,为这个新对象添加属性   
  • 返回新对象  
  1. alert(typeofa =="string") ------------->true
  2. alert(typeofa ==String) --------------->false
  3. 1
复制代码
2、面向对象的程序设计

  
       
  •   function 构造器
           
    • 共同点:
              
      • 动态创建一块内存空间,闭包      
            
    • 不同点:
              
      • 函数调用是没有办法拿到空间的地址的,而且这块地址是一块临时地址,执行完函数之后,就会销毁      
      • new 开辟内存空间,把这块空间的地址返回,这块空间就有可能长期的被引用      
           
       
  • prototype 原型
           
    • 通过原型使通过同样一个构造器所 new(创建) 出来的对象具有相同的属性和行为     
    • prototype 本质就是一个对象   
       
  • foreach   
  • this 指代当前创建的这块内存 this.name=name 指代当前内存中的这个 name 属性 接收外界传过来的值   
  • 继承  
  多种构造函数

   传统的创建对象

  1. alert(typeofa =="string") ------------->true
  2. alert(typeofa ==String) --------------->false
  3. 2
复制代码
工厂模式

  1. alert(typeofa =="string") ------------->true
  2. alert(typeofa ==String) --------------->false
  3. 3
复制代码
构造函数

  1. alert(typeofa =="string") ------------->true
  2. alert(typeofa ==String) --------------->false
  3. 4
复制代码
原型模式

  1. alert(typeofa =="string") ------------->true
  2. alert(typeofa ==String) --------------->false
  3. 5
复制代码
简单原型模式

  1. alert(typeofa =="string") ------------->true
  2. alert(typeofa ==String) --------------->false
  3. 6
复制代码
构造函数和原型模式

  1. alert(typeofa =="string") ------------->true
  2. alert(typeofa ==String) --------------->false
  3. 7
复制代码
动态原型模式

  1. alert(typeofa =="string") ------------->true
  2. alert(typeofa ==String) --------------->false
  3. 8
复制代码
稳妥构造函数

  1. alert(typeofa =="string") ------------->true
  2. alert(typeofa ==String) --------------->false
  3. 9
复制代码
其他:

  
       
  • 函数调用后一定有返回值,没有返回值就是 undefined  
  一些内存图示

   

javascript笔记基础总结篇

javascript笔记基础总结篇-25-技术控-javascript,document,浏览器,应用程序,window

  第八课时

   上节回顾:

   1.object对象

  
       
  • new 关键字代表的是新开辟一块内存空间   
  • 没有被引用的内存空间,会在适当的时候被销毁
           
    • 两句代码含义等同     
    • var person = new Object();     
    • var person = {};     
    • 访问对象的属性除了用 对象引用属性 key 以外,还可以使用对象引用 [属性key]   
       
   2.面向对象的程序设计

  
       
  • a. function 构造器
           
    • 共同点:
              
      • 动态创建一块内存空间,闭包      
            
    • 不同点:
              
      • 函数调用是没有办法拿到空间的地址的,而且这块地址是一块临时地址,执行完函数之后,就会销毁      
      • new 开辟内存空间,把这块空间的地址返回,这块空间就有可能长期的被引用      
           
       
  • b. prototype 原型
           
    • 通过原型使通过同样一个构造器所 new (创建)出来的对象具有相同的属性和行为     
    • prototype 本质就是一个对象   
       
  • c. foreach   
  • c. this   
  • d.继承  
   知识点:

   1.prototype内存解析

  
       
  • prototype 是原型,是一块所有对应构造器创建的对象都共享的内存空间   
  • 在面向对象设计程序的时候,属性应该是对应的空间的,而功能应该是 prototype 公共空间的  
   2.通过prototype扩展功能

  
       
  • 所有的构造器都是继承于 Object 构造器的,因此只要 Object 的原型里有的功能,所有的对象都有  
  1. alert(c instanceofArray) --------------->true
  2. alert(d instanceofDate)
  3. alert(f instanceofFunction) ------------>true
  4. alert(f instanceoffunction) ------------>false
  5. 0
复制代码
一些内存图示

   

javascript笔记基础总结篇

javascript笔记基础总结篇-26-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-27-技术控-javascript,document,浏览器,应用程序,window

  第九课时

   回顾:

   1、prototype内存解析

  
       
  • prototype 是原型,是一块所有对应构造器创建的对象都共享的内存空间   
  • 在面向对象设计程序的时候,属性应该是对应的空间的,而功能应该是 prototype 公共空间的  
   2、通过prototype扩展功能

  
       
  • 所有的构造器都是继承于 Object 构造器的,因此只要 Object 的原型里有的功能,所有的对象都有   
  • 构造器在定义的时候 就默认创建了一个空的原型  
   3、封装

  
       
  • 1:找对象 小头爸爸 大头儿子 饭   
  • 2:抽象(类,构造器)   
  • 3:创建对象并且建立关系(操作对象)
       
  • 面向对象例子
      
  1. alert(c instanceofArray) --------------->true
  2. alert(d instanceofDate)
  3. alert(f instanceofFunction) ------------>true
  4. alert(f instanceoffunction) ------------>false
  5. 1
复制代码
知识点:

  
       
  • 1.继承   
  • 2.面向对象程序设计案例(猜拳)  
   一些内存图示

   

javascript笔记基础总结篇

javascript笔记基础总结篇-28-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-29-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-30-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-31-技术控-javascript,document,浏览器,应用程序,window

  第十课时

   上节回顾:

   1.继承

  
       
  • 本质就是从一个 prototype 对象中把它的功能都 copy 到另一个 prototype 对象   
  • 继承为什么要循环  
   2.call apply方法的使用

  
       
  • func.call(obj) :调用 func 的时候,以 obj 这个对象的作用域去调用   
  • 改变函数在调用的时候里面闭包的作用域   
  • call(obj,arg1,arg2,arg3) ; call 第一个参数传对象,可以是 null 。参数以逗号分开进行传值,参数可以是任何类型。
    apply(obj,[arg1,arg2,arg3]) ; apply 第一个参数传对象,参数可以是数组或者 arguments 对象  
   知识点:

  API application program interface

  
       
  • 第一:遇到问题   
  • 第二:查资料或者学习 -> 解决问题   
  • 第三:记住有这个功能   
  • 第四:查资料(百度)  
  常用API

  
       
  • 1. String   
  • 2. Array   
  • 3. Math Math.random();   
  • 4. Date  
   日期型函数 Date

   

javascript笔记基础总结篇

javascript笔记基础总结篇-32-技术控-javascript,document,浏览器,应用程序,window

  
       
  • 声明  
  1. alert(c instanceofArray) --------------->true
  2. alert(d instanceofDate)
  3. alert(f instanceofFunction) ------------>true
  4. alert(f instanceoffunction) ------------>false
  5. 2
复制代码

       
  • 获取时间的某部份  
  1. alert(c instanceofArray) --------------->true
  2. alert(d instanceofDate)
  3. alert(f instanceofFunction) ------------>true
  4. alert(f instanceoffunction) ------------>false
  5. 3
复制代码

       
  • 计算之前或未来的时间  
  1. alert(c instanceofArray) --------------->true
  2. alert(d instanceofDate)
  3. alert(f instanceofFunction) ------------>true
  4. alert(f instanceoffunction) ------------>false
  5. 4
复制代码

       
  • 计算两个日期的偏移量  
  1. alert(c instanceofArray) --------------->true
  2. alert(d instanceofDate)
  3. alert(f instanceofFunction) ------------>true
  4. alert(f instanceoffunction) ------------>false
  5. 5
复制代码

       
  • 检查有效日期  
  1. alert(c instanceofArray) --------------->true
  2. alert(d instanceofDate)
  3. alert(f instanceofFunction) ------------>true
  4. alert(f instanceoffunction) ------------>false
  5. 6
复制代码
字符串String型函数API

   

javascript笔记基础总结篇

javascript笔记基础总结篇-33-技术控-javascript,document,浏览器,应用程序,window

  
       
  • 声明  
  1. alert(c instanceofArray) --------------->true
  2. alert(d instanceofDate)
  3. alert(f instanceofFunction) ------------>true
  4. alert(f instanceoffunction) ------------>false
  5. 7
复制代码

       
  • 字符串连接  
  1. alert(c instanceofArray) --------------->true
  2. alert(d instanceofDate)
  3. alert(f instanceofFunction) ------------>true
  4. alert(f instanceoffunction) ------------>false
  5. 8
复制代码

       
  • 截取字符串  
  1. alert(c instanceofArray) --------------->true
  2. alert(d instanceofDate)
  3. alert(f instanceofFunction) ------------>true
  4. alert(f instanceoffunction) ------------>false
  5. 9
复制代码

       
  • 转换大小写  
  1. alert(c.constructor === Array) ---------->true
  2. alert(d.constructor === Date) ----------->true
  3. alert(e.constructor === Function) ------->true
  4. 0
复制代码

       
  • 字符串比较  
  1. alert(c.constructor === Array) ---------->true
  2. alert(d.constructor === Date) ----------->true
  3. alert(e.constructor === Function) ------->true
  4. 1
复制代码

       
  • 检索字符串  
  1. alert(c.constructor === Array) ---------->true
  2. alert(d.constructor === Date) ----------->true
  3. alert(e.constructor === Function) ------->true
  4. 2
复制代码

       
  • 查找替换字符串  
  1. alert(c.constructor === Array) ---------->true
  2. alert(d.constructor === Date) ----------->true
  3. alert(e.constructor === Function) ------->true
  4. 3
复制代码

       
  • 特殊字符
           
    • \b : 后退符     
    • \t : 水平制表符     
    • \n : 换行符     
    • \v : 垂直制表符     
    • \f : 分页符     
    • \r : 回车符     
    • \” : 双引号     
    • \’ : 单引号     
    • \\ 反斜杆   
       
  
       
  • 将字符转换成 Unicode 编码   
  1. alert(c.constructor === Array) ---------->true
  2. alert(d.constructor === Date) ----------->true
  3. alert(e.constructor === Function) ------->true
  4. 4
复制代码

       
  • 将字符串转换成URL编码  
  1. alert(c.constructor === Array) ---------->true
  2. alert(d.constructor === Date) ----------->true
  3. alert(e.constructor === Function) ------->true
  4. 5
复制代码

       
  • 扩展阅读
           
    • JavaScript下常用的字符串   
       
  Math对象型

  
       
  •   Math.abs(num) : 返回 num 的绝对值
       
  •   Math.acos(num) : 返回 num 的反余弦值
       
  •   Math.asin(num) : 返回 num 的反正弦值
       
  •   Math.atan(num) : 返回 num 的反正切值
       
  •   Math.atan2(y,x) : 返回 y 除以 x 的商的反正切值
       
  •   Math.ceil(num) : 返回大于 num 的最小整数
       
  •   Math.cos(num) : 返回 num 的余弦值
       
  •   Math.exp(x) : 返回以自然数为底,x次幂的数
       
  •   Math.floor(num) : 返回小于 num 的最大整数
       
  •   Math.log(num) : 返回 num 的自然对数
       
  •   Math.max(num1,num2) : 返回 num1 和 num2 中较大的一个
       
  •   Math.min(num1,num2) : 返回 num1 和 num2 中较小的一个
       
  •   Math.pow(x,y) : 返回 x 的 y 次方的值
       
  •   Math.random() : 返回 0 到 1 之间的一个随机数
       
  •   Math.round(num) : 返回 num 四舍五入后的值
       
  •   Math.sin(num) : 返回 num 的正弦值
       
  •   Math.sqrt(num) : 返回 num 的平方根
       
  •   Math.tan(num) : 返回 num 的正切值
       
  •   Math.E : 自然数( 2.718281828459045 )
       
  •   Math.LN2 : 2 的自然对数( 0.6931471805599453 )
       
  •   Math.LN10 : 10 的自然对数( 2.302585092994046 )
       
  •   Math.LOG2E : log 2 为底的自然数( 1.4426950408889634 )
       
  •   Math.LOG10E : log 10 为底的自然数( 0.4342944819032518 )
       
  •   Math.PI : π(3.141592653589793)
       
  •   Math.SQRT1_2 : 1/2 的平方根( 0.7071067811865476 )
       
  •   Math.SQRT2 : 2 的平方根( 1.4142135623730951 )
      
  Number型 常用的数字函数

  
       
  • 声明  
  1. alert(c.constructor === Array) ---------->true
  2. alert(d.constructor === Date) ----------->true
  3. alert(e.constructor === Function) ------->true
  4. 6
复制代码

       
  • 字符串与数字间的转换  
  1. alert(c.constructor === Array) ---------->true
  2. alert(d.constructor === Date) ----------->true
  3. alert(e.constructor === Function) ------->true
  4. 7
复制代码

       
  • 判断是否为有效的数字  
  1. alert(c.constructor === Array) ---------->true
  2. alert(d.constructor === Date) ----------->true
  3. alert(e.constructor === Function) ------->true
  4. 8
复制代码

       
  • 数字型比较  
  1. alert(c.constructor === Array) ---------->true
  2. alert(d.constructor === Date) ----------->true
  3. alert(e.constructor === Function) ------->true
  4. 9
复制代码

       
  • 格式化显示数字  
  1. functionA(){};
  2. functionB(){};
  3. A.prototype = newB();//A继承自B
  4. varaObj =newA();
  5. alert(aobj.constructor === B) -----------> true;
  6. alert(aobj.constructor === A) -----------> false;
  7. 0
复制代码

       
  • X进制数字的转换  
  1. functionA(){};
  2. functionB(){};
  3. A.prototype = newB();//A继承自B
  4. varaObj =newA();
  5. alert(aobj.constructor === B) -----------> true;
  6. alert(aobj.constructor === A) -----------> false;
  7. 1
复制代码

       
  • 随机数  
  1. functionA(){};
  2. functionB(){};
  3. A.prototype = newB();//A继承自B
  4. varaObj =newA();
  5. alert(aobj.constructor === B) -----------> true;
  6. alert(aobj.constructor === A) -----------> false;
  7. 2
复制代码
5. Regex

  1. functionA(){};
  2. functionB(){};
  3. A.prototype = newB();//A继承自B
  4. varaObj =newA();
  5. alert(aobj.constructor === B) -----------> true;
  6. alert(aobj.constructor === A) -----------> false;
  7. 3
复制代码
一些图示

   

javascript笔记基础总结篇

javascript笔记基础总结篇-34-技术控-javascript,document,浏览器,应用程序,window

   

javascript笔记基础总结篇

javascript笔记基础总结篇-35-技术控-javascript,document,浏览器,应用程序,window

  
       
  • 正则表达式扩展阅读
           
    • 正则表达式30分钟入门教程     
    • 梳理常用的正则表达式   
       
  第十一课时

   上节回顾:

  
       
  • 1. String   
  • 2. Math Math.random()  
   知识点:

  
       
  • 1. Date 日期类   
  • 2. Array   
  • 3. Regex
           
    • a. [] 一个字符的范围     
    • b.有顺序要求的     
    • c. \w==[a-zA-Z0-9_] \d==[0-9]     
    • d. {count} 设置匹配数量比如 \w{5}     
    • e. // 的正则表达式匹配局部, /^$/ 的正则表达式是匹配全部     
    • f. () 的作用就是为了分组匹配   
       
  
       
  • 简单封装一个对象案例  
  1. functionA(){};
  2. functionB(){};
  3. A.prototype = newB();//A继承自B
  4. varaObj =newA();
  5. alert(aobj.constructor === B) -----------> true;
  6. alert(aobj.constructor === A) -----------> false;
  7. 4
复制代码
  1. functionA(){};
  2. functionB(){};
  3. A.prototype = newB();//A继承自B
  4. varaObj =newA();
  5. alert(aobj.constructor === B) -----------> true;
  6. alert(aobj.constructor === A) -----------> false;
  7. 5
复制代码
第十二课时

   上节回顾:

  
       
  • 1. Date 期类   
  • 2. Array   
  • 3. Regex
           
    • a. [] 一个字符的范围     
    • b.有顺序要求的     
    • c. \w==[a-zA-Z0-9_] \d==[0-9]     
    • d. {count} 设置匹配数量比如 \w{5} , {c1,c2}     
    • e. // 的正则表达式匹配局部, /^$/ 的正则表达式是匹配全部     
    • f. () 的作用就是为了分组匹配   
       
   新知识点:

  
       
  • 1. Regex
           
    • g. + 代表的是 1-N 个, * 代表的是 0-N 个     
    • h. ? 代表该字符要不没有要不就有一个     
    • i. . 代表的是任意字符     
    • j. \转义符   
       
  • 2. BOM  
  第十三课时

   上节回顾:

  
       
  • 1.Regex
           
    • a. [] 一个字符的范围     
    • b.有顺序要求的     
    • c. \w==[a-zA-Z0-9_] \d==[0-9]     
    • d. {count} 设置匹配数量比如 \w{5} , {c1,c2}     
    • e. // 的正则表达式匹配局部, /^$/ 的正则表达式是匹配全部     
    • f. () 的作用就是为了分组匹配     
    • g.+代表的是 1-N 个, * 代表的是 0-N 个     
    • h. ? 代表该字符要不没有要不就有一个     
    • i. . 代表的是任意字符     
    • j. \转义符   
       
   新知识:

  
       
  • window 是 Window 构造器造出来的一个对象 alert(window instanceof Window)   
  • document 是 Document 构造器造出来的一个对象   
  • 任何对象在我们的内存中他都是由某个构造器创建出来的 也就是说 有构造器一定有对应的原型prototype   
  • 例如: div 是由 HTMLDivElement 这个构造器创建的一个实例 div = new HTMLDivElement() span = new HTMLSpanElement()   
  • 查看某个对象对应的构造器: console.log();   
  • 整个浏览器的实现就是一个面向对象的编程思想 一切皆是对象  
  1.BOM 浏览器对象模型

   

javascript笔记基础总结篇

javascript笔记基础总结篇-36-技术控-javascript,document,浏览器,应用程序,window

  <ul>    a. screen 指的不是浏览器的宽度,指的是整个电脑屏幕的分辨率   
         
  • 可以拿到屏幕可用分辨率   
     b. navigator   
         
  • 可以通过 userAgent 判断当前浏览器信息   
     c. location   
         
  • URL :统一资源定位符 Union Resource Location     
  • 可以通过 href 属性重定向(改变)页面的URL,进行页面跳转   
     d. history   
         
  • go 方法能够让我们进行历史回退或者前进   
     <p> e. frames



上一篇:Tup – A file-based build system for Linux, OSX, and Windows
下一篇:5 Best books for OCAJP8 Exam 1Z0-808 - Java8
刘丰荣 发表于 2016年10月3日 07:12
前排卖瓜子,汽水!
回复 支持 反对

使用道具 举报

我傻但没求你爱我 发表于 2016年10月10日 11:11
鼎力支持!!
回复 支持 反对

使用道具 举报

咖啡香夜 发表于 2016年10月18日 08:03
很累,感觉不会再爱了!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表