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

技术控

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

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

[复制链接]
情歌萌物 发表于 2016-10-2 21:37:57
224 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笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

  第二课时

  回顾上节:

  
       
  •   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笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

  原型链的几张图解

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

  
       
  • 扩展阅读
           
    • 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笔记基础总结篇

  第八课时

   上节回顾:

   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笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

  第九课时

   回顾:

   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笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

  第十课时

   上节回顾:

   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笔记基础总结篇

  
       
  • 声明  
  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笔记基础总结篇

  
       
  • 声明  
  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笔记基础总结篇

   

javascript笔记基础总结篇

javascript笔记基础总结篇

  
       
  • 正则表达式扩展阅读
           
    • 正则表达式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笔记基础总结篇

  <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:11
前排卖瓜子,汽水!
回复 支持 反对

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

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

返回顶部 返回列表