zhuhuiwen Front-end Dev Engineer

js面向对象第七天

2016-12-03
JavaScript

12/3/2016 8:43:47 AM

  1. 伪数组
    1. 要有length属性
  2. 作业题分析

严格模式

  1. 概念
    1. 语法变得更加严格
  2. 如何开启严格模式
    1. “use strict”
  3. 常规的限制
    1. 不能使用未使用var声明的变量
    2. 不能使用重复的参数名称！！！
    3. 之前是在严格模式下不能有重复的属性名称，但是后来更新后，是允许这么做了！
    4. 严格模式不能使用8进制的常量
    5. 在严格模式下，eval中有自己的单独的作用域！！

  4. 代码详解

         //    1.不能使用未使用var声明的变量
     a = 10;
     //a is not defined(…)
     console.log(a);
	
     //2.不能使用重复的参数名称！！！
     //Duplicate parameter name not allowed in this context
     function test(a,a){};
     test();
	
     //3.之前是在严格模式下不能有重复的属性名称，但是后来更新后，是允许这么做了！
     var obj = {
         name : 'waxun',
         name : 'kaguo'
     };
     //Object {name: "kaguo"}
     console.log(obj);
	
     //4.严格模式不能使用8进制的常量
 //    Octal literals are not allowed in strict mode.
     var b = 010;
     console.log(b);
	
     //5. 在严格模式下，eval中有自己的单独的作用域！！
     //注意：  不开启严格模式外面是可以访问到eval里面得的变量
     eval('var a = 10;');
     //a is not defined(…)
     console.log(a);
	
     //property 'prototype' of function Object() { [native code] }(…)
     //在非严格模式下，也不可以被删除，但是不会报错
     delete  Object.prototype;

Object.defineProperty

  1. 概念
    1. mdn定义的defineProperty
    2. Object.defineProperty() 方法
      1. 会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，
      2. 并返回这个对象。
  2. 语法
    1. Object.defineProperty(obj, prop, descriptor)
    2. 参数：
      1. obj 需要定义属性的对象。
      2. prop 需定义或修改的属性的名字。
      3. descriptor 将被定义或修改的属性的描述符。
    3. 返回值
      1. 返回传入函数的对象，即第一个参数obj
  3. 学习这个属性的目的
    1. 该方法允许精确添加或修改对象的属性。
    2. 一般情况下，
      1. 我们为对象添加属性是通过赋值来创建并显示在属性枚举中
      2. （for…in 或 Object.keys 方法）， 但这种方式添加的属性值可以被改变，
      3. 也可以被删除。而使用 Object.defineProperty() 则允许改变这些额外细节的默认设置。
    3. 在写框架的时候
      1. 例如，默认情况下，使用 Object.defineProperty() 增加的属性值是不可改变的。
  4. 注意：
    1. 第三个参数都会为第二个参数(属性的操作)
    2. 第二个参数可以是之前已经存在的，也可以是新增加的，对属性的用法的限制
  5. 第三个参数对象的取值
    1. configurable : true,可以被删除的；默认是false，不可以被删除的；
    2. enumerable : true, 可以对第二个参数的属性进行遍历；false默认值,不可以；
    3. value : 该属性对应的值。默认为 undefined//新增的就是直接赋值，对象中就存在的就是修改
    4. writable : 1. 当且仅当该属性的 writable 为 true 时，该属性才能被赋值运算符改变。 2. 默认为 false。
    5. get 和 set
      1. 5.1 get
        1. 一个给属性提供 getter 的方法，
        2. 如果没有 getter 则为 undefined。
        3. 该方法返回值被用作属性值
        4. undefined
      2. set
        1. 一个给属性提供 setter 的方法，
        2. 如果没有 setter 则为 undefined。
        3. 该方法将接受唯一参数，并将该参数的新值分配给该属性。
        4. 默认为 undefined。
        5. 注意
          1. 这个未看
          2. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
  6. 代码
    1. 正常的直接进行创建一个对象
      1. 利用对象的动态操作特性进行给对象操作属性

      2. 代码

         /*
 * 一般情况下：
 *       动态给对象添加属性
 * 添加的属性值可以被改变
 * */
 /*var obj = {};
 obj.name = 'waxun';
 obj['age'] = 18;
 //Object {name: "waxun", age: 18}
 console.log(obj);*/
    2. 使用可以自己控制

      1. 代码

          /*
  * Object.defineProperty()
  * */
  var obj = {
      age : 18
  };
  var nameV;//只是一个给set和get的一个中间变量
      Object.defineProperty(obj,'name',{
  //        configurable : false,
  //        enumerable : false,
  //        value : 'waxun',
  //        writable : false,
          get : function(){
              console.log('get方法被调用');
              return nameV;//进行返回set进行设置的值
          },
          set : function(newVal){
              console.log('set方法被调用');
              nameV = newVal;
          }
      });
      //Object {age: 18, name: undefined}
      //给obj添加了name属性，值为undefiend
  //    console.log(obj);
			
      //Object {} 设置configurable : true，可以被删除的
     /* delete obj['name'];
     //Object {age: 18, name: undefined}
      console.log(obj);
      */
			
      //Object {age: 18, name: undefined}，true还是打印原来的值，不可以被删除
     /* delete obj['name'];
      //Object {name: undefined}
      delete obj['age'];
      console.log(obj);*/
			
      //Object {age: 18, name: undefined}
      //enumerable : true18  undefined/false 只打印18
     /* console.log(obj);
      for(var k in obj){
          console.log(obj[k]);
      }*/
			
      //Object {age: 18, name: "waxun"}
  //    console.log(obj);
			
      //writable true:可写,Object {age: 18, name: "kaguo"}
      //false :Object {age: 18, name: undefined},不可以进行赋值运算
  //    obj.name = 'kaguo';
  //    console.log(obj);
			
      //get
      //get方法被调用  waxun
      //直接在获得通过defineProperty定义的属性的时候，就进行get获取值的操作，并且将get的返回值给
      //第二参数的属性赋值
			
			
      //set  和 get  的配合使用
      //set方法被调用,将右边的kaguo，调用     set方法进行设置值
      obj.name = 'kaguo';
      //通过取值的方式，调用get方法，进行取值   get方法被调用
      console.log(obj.name); ## forEach() ##
  7. 概念
    1. forEach() 方法对数组的每个元素执行一次提供的函数(回调函数)。
  8. 语法
    1. array.forEach(callback[, thisArg])
  9. 参数
    1. callback
      1. 函数为每个元素执行，接收三个参数：
        1. currentValue(当前值) 数组中正在处理的当前元素。
        2. index(索引) 数组中正在处理的当前元素的索引。
        3. array 正在应用forEach()数组
  10. hasOwnProperty() 方法
    1. 用来判断某个对象是否含有指定的自身属性
    2. Array.prototype.hasOwnProperty(‘forEach’)//true

  11. 代码

         var arr1 = [1,2,3,4,5,6,7];
     arr1.forEach(function(val,index,arr){
         console.log(index+'=>'+val);//将数组进行遍历出来
         console.log(arr === arr1);//true  这个两个数组是同一个数组
     });
     //将arr1中的值进行翻倍，存入到arr1 中
     arr1.forEach(function(val,index,arr1){
         arr1[index] = val*2;
     });
    //[2, 4, 6, 8, 10, 12, 14]
    console.log(arr1);

map()

  1. map()概念
    1. 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
  2. 语法
    1. array.map(callback[, thisArg])
  3. 参数
    1. callback
      1. 原数组中的元素经过该方法后返回一个新的元素。
        1. currentValue
          1. callback 的第一个参数，数组中当前被传递的元素。
        2. index
          1. callback 的第二个参数，数组中当前被传递的元素的索引。
        3. array
          1. callback 的第三个参数，调用 map 方法的数组。
  4. 返回值
    1. 由回调函数的返回值组成的新数组。
  5. 描述
    1. map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数
    2. callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。
    3. callback 函数只会在有值的索引上被调用
    4. 那些从来没被赋过值或者使用 delete 删除的索引则不会被调用

  6. 代码

         var arr1 = [1,2,3,4,5,6,7];
     arr1.map(function(val,index,arr1){
         console.log(index+'==>'+val);
     });
	
     //map返回的是一个新的数组
     var arr2 = arr1.map(function(val,index,arr1){
         return val;
     });
    //[1, 2, 3, 4, 5, 6, 7]
    console.log(arr2);
    console.log(arr2 === arr1);//false*/
  7. 将数组中的元素转换成字符串类型的数组

    1. 代码

          var arr1 = [1,2,3,4,5,6,7];
    //["1", "2", "3", "4", "5", "6", "7"]
    console.log(arr1.map(String));

  8. 直接去调用

     /*
   **  默认的竟然有值**
 * value index arr1
 * 1 0 [1, 2, 3]
 * 2 1 [1, 2, 3]
 * 3 2 [1, 2, 3]
 * */

 //[1,2,3].forEach(console.log);//直接去遍历里面值

  9. 直接给map(String)

         /*
     *1 0 [1, 2, 3]
     *2 1 [1, 2, 3]
     *3 2 [1, 2, 3]
     *
     * */
 //   [1, 2, 3].map(console.log);
 //   console.log([1, 2, 3].map(String));
	
 //   [1, 2, 3].map(String)
   /*  var arr = [1,2,3];
     var arr2 = [];
     arr.map(function(val,index,arr){
         arr2.push(String(val,index,arr));
         return arr2;
         }
     );
    //["1", "2", "3"]
    console.log(arr2);*/
  10. 把数组中的元素，全部转换成数字

    1. 代码和存在的问题

           var arr = ["1","2","234","34234"];
    //[1, 2, 234, 34234]
     //console.log(arr.map(Number));
    //[1, NaN, NaN, NaN]
     //console.log(arr.map(parseInt));
		
    //function(遍历的元素, 下标, 数组){}
    //注意，在给map方法和forEach传递参数的时候，回调函数的参数一定要一一对应！！！
    //联系下面的parseInt去理解！！
		
    //parseInt()
    //parseInt()
		
    //正是由于map的回调函数的参数index索引值作了parseInt的基数radix，
    // 导致出现超范围的radix赋值和不合法的进制解析，才会返回NaN。
    console.log(parseInt('123', 0));//123
    console.log(parseInt('123', 1));//NaN 12/4/2016 2:47:59 PM  12/3/2016 11:03:58 AM  # js高级总结 # ## 递归 ## ### 划归思想 ###
  11. 作用
    1. 由难化易
  12. 概念
    1. 就是函数内部直接或间接调用自己
  13. 案例
    1. n项和
    2. 阶乘
    3. fb
    4. 获取后代元素!!!
      1. 算法
    5. OJ
      1. leetcode
      2. 九度online

注意 1. 条件函数 2. js中没有线程的概念 3. 注意 1. 使用缓存解决递归斐波那契 2. jq的缓存实现分析 3. jq的缓存事项源码解析 4. 沙箱 1. 压缩 2. ？？？ 5. 上下文 1. call(要将thia改成的东西) 1. 注意: 第一个null 和 window不是一个对象 12/3/2016 11:35:27 AM 12/3/2016 2:40:56 PM

补充

  1. Array.prototype 常识 foreach
  2. map
    1. 将之前的数组映射到一个新的额数组、
    2. 作为map的返回值

      歌曲管理

  3. 注意
    1. indexOf 也可以放在数组中使用
    2. var index = songList.indexOf(song); 找出这条信息的位置
  4. 注意
    1. 在对象中的原型
    2. 自己调用同类的方法，用this指向
  5. 继续
    1. 有页面版的
  6. 思路
    1. 获取新增按钮
    2. 注册点击事件
    3. 调用歌曲列表管理对象的add方法
      1. 获取歌曲名称
        1. 判空校验
      2. 获取歌手名称
      3. 调用add方法添加歌曲
    4. 在构造函数里面
      1. 进行把数据显示在页面上
        1. 把歌曲列表
    5. 将渲染的
      1. 放在prototype里面
      2. add 添加列表
      3. 显示在页面上this.render
    6. add
      1. 添加到歌曲列表中
      2. 把歌曲列表重新进行渲染
    7. 注意
      1. 只要让页面改变的，都需要重新渲染
    8. 面向对象的思想
      1. 在对象的原型中加上渲染
      2. 只要在调用的接口进行处理
      3. 往页面加上页面，也是对象的一部分功能
  7. 小知识点
    1. 开发的时候，进行直接打开浏览器
    2. 一步一步实现，用到什么往里面添，最后再封装
    3. -render———–render————-render——-render—- 12/3/2016 3:57:45 PM
  8. 优化 1.字符串具有不可变性
    1. htmlStr.join(‘’)
  9. init 方法
    1. 初始化意思，一半需要在对象刚刚创建好智慧和，需要做的工作，都放到这个方法来进行
    2. 构造函数
      1. 初始化
    3. 在对象初始化时，将初始化代码方法init方法
      1. 可以使代码优化
  10. 理解面向对象的思想
  11. 前端和后端进行的交互 12/3/2016 4:03:30 PM

    tab栏切换

  12. jq实现
      1. 需求
    2. 之前的
    3. 用jq实现

    4. 代码

      太长了，可以进行带着点进行切换

  13. 自己封装

    1. 单独的组件
      1. tab栏切换的li的列表 ul的id
      2. tab切换的div的列表的父元素的id
  14. 思路
    1. 拿到元素
    2. 注册事件
  15. 解释this
    1. 中专
      1. 将外面的this转换成that进行调用
  16. 添加一个自动播放
    1. 方法放在原型里面
    2. 属性放在构造函数里面
  17. 写框架和组件的思想
  18. 编码规范
  19. 基本功能–>思路
  20. 放在沙箱
    1. 4遍 12/3/2016 5:26:33 PM 12/3/2016 6:21:29 PM

Similar Posts

上一篇 js面向对象第六天

下一篇 js原生框架第一天

Comments

Content