zhuhuiwen Front-end Dev Engineer

js面向对象第一天

2016-11-24
JavaScript

11/24/2016 8:19:01 AM

js基础

  1. 基本
    1. 2016.1.2 webstorm版本
  2. 题目
    1. js包含三个部分
      1. ** dom bom ecma**
        1. ecma :固定了js的语法规范—一般使用的还是ecma3 (现在最新的是6，使用新语法TypeScript处理兼容)
        2. bom :浏览器对象模型，提供了一套浏览器相关的api
          1. navigator.userAgent—-通过正则表达式，取值出用户使用的什么浏览器
          2. location
            1. location.href = ‘http://waxun.github.io’
            2. localtion.reload 进行刷新页面
          3. window
            1. window.open()
        3. dom 文档对象模型
          1. 作用
            1. 提供了一套操作页面元素的api—application programing interface 就是方法
          2. 问题
            1. 没有dom的话怎么操作
              1. 页面本质返回出来的字符串，用正则了啥的去操作 object
    2. js中的数据类型
      1. 简单(值类型)
        1. number string boolean undefiend null(？？？是对象还是啥)
      2. 复杂(引用)
        1. 核心类型
          1. obj、 function
        2. 复合类型
          1. Array Date Math(本身就是一个对象，不需要new) RegExp(正则表达式regular expression) Number String Boolean(内置对象)

    3. 获取数据类型 1.** typeof 关键字** 1. 语法 1. typeof 数据 2. 返回值类型 1. 字符串类型 3. typeof 1. 获取不到详细的类型，如果是复杂类型的数据，只能获取到到

      1. 一个对象的toString() //一个对象的toString方法，返回的是[typeof方法，返回的是[Object]构造函数
      2. 获取一个数据的详细类型
        1. Object.prototype.toString 方法可以将对象转成字符串,字符串的格式为[obj 详细类型]
        2. 先调用 这个芳芳，将对象转换成上面格式的字符串 Object.prototype.toString.call(数据)
        3. 然后进行字符串的切片，从8开始，到-1结束，就可以获取到详细的类型了
      3. 代码
    4. 引用类型和值类形式
      1. 以后不要说堆和栈的问题
      2. js运行在浏览器 js引擎(这个是在对和栈里面的) 1.
        1. 值类型
          1. 直接存储值类型的数据的就是数据本身的数据就是
          2. num=10 直接进行开辟一个空间10，名字叫num
        2. 引用类型
          1. 数据单独存储，存储的是数的地址的数据就是引用数据的类型
          2. var obj = {‘name’:’waxun’,’age’:11}，右边先开辟一个空间有一个地址0X11 ，左边开辟一个空间(存储一个地址指向0X11)
          3. 里面再有引用类型，继续重复
      3. 值类型和引用类型赋值额类型
        1. 值类型赋值
          1. 直接将数据复制一份，交给新的变量，新变量和就变量完全独立，互不影响
        2. 引用类型的赋值
          1. …疑问??
          2. car
      4. 值类型和引用类型作为函数来使用的情况
        1. 解释
          1. obj= obj1(隐式的操作 形参 = 实参)
        2. 可以用值类型和引用类型赋值的特征进行分析
          1. 因为在函数调用的时候，会将实参赋值给形参，也就是做了隐式转换
        3. 面试题
          1. 画图
          2. 把实参赋值出来一份地址
          3. 指向的内容是同一个
          4. 一般都是在函数里面套变量修改，是否会影响外面的对象
        4. 值类型和引用类型
          1. 值类型 将原值赋值一份
          2. 引用类一份 将地址复制一份，修改的是同一块内容
  3. 对象的动态特征
    1. 概念
      1. 对象再创建好之后，可以随时的为对象新增成员(属性和方法)，这就是对象的动态特性
    2. 如何给创建的对象进行新增成员
      1. 下面两种访问对象属性一级成员的方式
        1. 如果对象有该属性，那么久直接修改
        2. 如果对象没有就新增该属性
      2. 方法
        1. 点语法
          1. 对象吗.属性名 = 值
        2. [] 关联数组
          1. 对象名[属性名]
          2. 一定要注意: 属性名是字符串
    3. 面试题 1. 在使用{}对象字面字面量进行属性操作的时候，会先调用该对象的toString 2. 注意: 1. 不管对象中有啥属性，toString放啊不会受到影响的，都返回的是[object Object]
    4. 扩展内容
      1. 关联数组语法也可以进行调用方法

  4. 全等和==的区别

    1. ===全等
      1. 判断 类型还有值 是否相等
    2. == 相等
      1. 值判断值是否相等
    3. 题目

  5. in关键字

    1.** for in循环终身会用** 1. 功能 1. 遍历执行对象的所有属性 1. for(var key in 对象){} 2. 注意 1. 对象的属性都是字符串类型的，记住 2. 点语法后面的字符，会被原样处理，不会当做变量进行替换 3. 用法 1. for(var key in file) 这个可以进行打印有的方法

    1. in的第二种用法
      1. 语法 :
        1. 属性名 in 对象名
      2. 功能：
        1. 判断指定的对象中是否有指定的属性
      3. 返回值布尔值

关系运算符

逻辑运算符

  1. &&   ！与或非
  2. 短路运算(逻辑中断)
    1. 或
      1. 表达式1   表达式2
        1. 如果表达式1位true就返回表达式1，如果表达式1位false就返回表达式2
        2. 【】   ‘abc’ ，返回[] 直接进行转换布尔值了，没有toString
    2. 与中断
      1. 表达式1&&表达式2
      2. 如果表达式1位fasle，就返回表达式1；

创建对象

  1. NEW 关键字

delete关键字

  1. delete关键字 意思是删除
  2. 作用
    1. 删除未使用var声明的变量
      1. 语法： delete 变量名
      2. 返回值
        1. 布尔值 成功与否
    2. 删除对象的属性
      1. delete obj.name
    3. 删除数组
      1. 可以进行删除，但是length不会变
      2. arr[0] 是undefiend
    4. 注意：
      1. 如果访问一个不存在的变量，会报错
      2. 如果访问一个obj的不存在的属性，会undefiend
    5. 返回值
      1. u可靠，删除系统内置的属性的时候，有可能删除不成功，但是却返回true….
    6. 如果使用delete关键字操作数组
      1. 那么会将指定位置的元素改为undefiend 其他元素的索引不会变化
      2. 如果使用in关键字来操作数组
        1. 判断的是指定的索引是不是存在于数组中，而不是数据
        2. 判断一个值是否在数组中，用indexof，返回的是索引值；没有的话返回-1
    7. 伪数组
      1. 用对象去模拟的数组，可以进行遍历，也可以用数组的语法去访问属性
      2. 但是不能使用数组特有的方法
      3. 也可以用for in

11/24/2016 2:21:33 PM

  1. null
    1. 用typeof 去判断 是object 是复杂数据类型
    2. 用存储方式 是简单的数据类型 null==undefiend true

循环

  1. for
  2. whiledo
  3. while
  4. for in

分支语句

  1. if else
  2. switch

break和continue

  1. break
    1. 跳出整个循环，继续执行循环下面的语句
  2. continue
    1. 跳出本次循环，继续执行下次循环
    2. 求出1-100之间的偶数和

调试工具

  1. 打开方式
    1. ctrl+shift+i
    2. ctrl+shift+j
    3. f12
  2. 作用
    1. css 调试
      1. 箭头选中某个元素
      2. 右边显示的样式
      3. computed
        1. 是计算后的盒模型
    2. console控制台
      1. 打印
      2. 可以写js代码
        1. 与当前页面提供的是同一个运行环境
          1. 作用
            1. 可以将代码中的变量在console进行打印 a
            2. 操作dom元素
              1. document.getElementById(‘box’).innerHTML=’我是在控制台进行操作页面dom元素的’;
            3. 调用一个函数test()
              1. 没有return的的话，直接进行返回一个undefiend；
              2. 写return的话，进行返回值输出在控制台
            4. 刷红包
              1. 写个定时器
    3. js调错
      1. pause on exception (在异常的地方进行暂停)
      2. 双击行数，进行加断点
        1. 颜色 浅蓝色: 非活跃状态； 深蓝色 活跃状态
        2. f8
        3. f10 逐步执行，直接将循环执行完成，在方法外面执行–执行完，不进到方法里面
        4. f11 into函数内
        5. shift+f11 跳出函数体
      3. 第二种断点
        1. add 条件断点
        2. 一般用在循环里面
      4. wathch
        1. 可以监视变量的变化
        2. 和看document
          1. 可以看到dom结构
      5. call stack
        1. 函数的调用栈
      6. scope
        1. 作用域
      7. 断点
        1. 处于激活或是非激活状态
    4. network
      1. 状态码
      2. network
        1. 网络状态
        2. 模拟用户网络状态
        3. manifast… 是什么东西 –h5的离线缓存什么的
        4. timing是什么东西？

console展示对象的时候的问题

  1. 点开的一瞬间将值进行改完了
  2. 值类型拿到的是原值， 引用类型拿到的是地址
  3. … 看下子

    dom操作

  4. 增删改查
  5. 增加
    1. createElement
    2. innerHTML
    3. appendChild
  6. 删除
    1. removeChild
  7. 改
    1. innerText
    2. innerHtML
    3. className
    4. document.setAttribute
  8. 查
    1. getId
    2. sByTagName
    3. getElementsByClassNmae
    4. querySelect
    5. querySelectAll

异常处理

  1. 异常
    1. 最大的特征
      1. 一旦报错，后面的代码，将不会再执行

  2. try catch finally

      try{
     //放入可能出现异常的代码
     //Uncaught ReferenceError: a is not defined(…)
     console.log(a);
     //后面的代码不会被执行
     console.log(typeof a);
 }catch(e){
     //e就是异常信息
     console.log(e);
 }
  3. 注意
    1. js分为–预解析和执行阶段
    2. 语法错误异常，会在预解析阶段就找到，不会执行代码
    3. 所以try 不会捕获到语法异常
  4. 用在那
    1. 出错的代码后面的代码是不会继续执行的，直接回跳到catch中去执行
    2. try catch 语句捕获异常后，try catch后面的代码是可以正常执行的
    3. try catch 的完整模式
      1. try 可能会出现异常的代码
      2. catch 储蓄哦之后的处理代码
      3. finally 无论是否出错，都会执行的代码
        1. 释放资源(js中很少使用)
    4. 自定义错误信息
      1. throw 关键字可以抛出异常信息
      2. 手动抛出异常
      3. throw ‘信息’
      4. 抛出的异常是什么木，捕获的异常就是什么
      5. 什么时候使用
        1. 在别人调用的时候，需要传参数而且并没有传参数，给调用的方法抛出异常

    5. 代码

       //throw  完了，后面的代码就不会被执行
 function test(name){
     if(!name){
         throw  '没有进行传参数';
     }
     alert(1);//没有被执行，因为throw的
     console.log(name+'-----hi---');
 }
 //没有进行传参数
 //调用结束后进行的打印 没有进行传参数
 try{
     test();
 }catch(e){
     console.log(e);
 }
  5. 补充

    1. js不能改文件，是在浏览器中执行的

js高级讲义

概念面试题

  1. 面向过程的思想
    1. 步骤的完成方式
  2. 面向对象的基本概念
    1. 将解决问题的关注点，放到解决问题所需要的一系列对象身上

  3. 面向对象其实就是对面向过程的封装

  4. 什么是对象
    1. js中，什么是对象
      1. 无序键值对的集合 首字母排序
      2. 特征
      3. 行为
  5. 如何将现实生活中的对象用js对象模拟出来
    1. 对应关系:
      1. 直接用js中的对象的属性来对应显示生活中对象的特征
      2. 用方法来对应行为
    2. code
      1. 写一个对象
    3. 小明在gjc上领着一只叼着香肠的dog
  6. 20面向对象的编程的实例
    1. 步骤3步
    2. jq一步完成

面向对象的三大特性

  1. 封装
    1. 将属性和方法封装成一个对象，实现一系列的功能，只需要对外界暴露一些接口，外界在使用对象的时候，不需要关心内部的实现
    2. Math.sin()
  2. 继承
    1. 现实中的
    2. 在js中，一个对象没有一些属性和方法，另外一个对象有，拿过来用
    3. 实现方式
      1. 实现继承的最简单的形式
        1. 混入时 继承(for-in)
  3. 多态
    1. js中不支持多态
    2. 父类指针指向子类对象(类)java中的
    3. …

js高级第一天

js基础

数据类型

简单数据类型

  • string number boolean undefiedn

复杂数据类型

  • Array
  • Date
  • Math
  • Reg
  • Num
  • Str
  • Bool
  • Obj
  • funtion(){}
  • null
    • 变量的值永远不可能自动为null,除非手动设置
    • 什么时候要将一个变量设置为null
      • 自己在写方法给别人提供对象的时候，如果返回的对象不存在或者不出现异常，那么这个返回值，那么这个值设置为null
      • 没有获取到getElementById(‘’)

获取类型的关键字

—js typeof 数据 ..返回值为字符串类型的 //功能: 获取数据的数据类型 如果是复杂类型….

11/24/2016 6:42:40 PM

Similar Posts

上一篇 HTML5第一天

下一篇 js面向对象第二天

Comments

Content