1-隐式转换 数据类型 值类型/引用类型(定义/赋值/在函数中使用) in/delete this 构造函数创建对象

隐式转换

  • 加法的隐式转换
    • +号的两边 一边为字符串 一边为数字

      • 先将非字符串转换为字符串 然后再拼接
    • 返回值: 字符串

      console.log('1'+1+1);     //网页输出字符串111
      console.log('1'+(1+1));   //输出字符串12, 需要计算加法再接-->加上小括号
      
      function demo() {
        console.log('1');
        setTimeout(function(){
          console.log(2);
        },1000);
        setTimeout(function(){
          console.log(3);
        },0);
        console.log('4');
      };
      demo();  // 1 4  3 2
       页面里所有的setTimeout定义的操作,都将放在同一列队中依次执行. 
       而列队执行的时间需要等到函数调用栈执行完毕才会执行, 
       相当于可执行代码执行完毕, 才会执行setTimeout操作, 且按照延时长短顺序先后执行.
      
  • *乘法 | /除法 | %取模 | -减法隐式转换
    • 先将非数值转成数值, 然后再运算
      document.write('1'*5); //网页输出数字5
类型转换.png

逻辑与&& 逻辑或|| 逻辑非!

  • &&: 如果与两边不是布尔值, 先去判断左边是不是为真
    • 左边为真就返回右边的值 无论什么类型的值都要返回
    • 左边为假 就返回左边
  • || : 两边不是布尔值 就先看左边是否为真
    • 如果左边为真 就返回左边的值
    • 如果左边为假 就返回右边的值
  • ! : 如果逻辑非不是布尔值(判断原则非0即真)-先将表达式转换成布尔值-然后再取反

基本类型和复杂类型

  • 基本/简单数据类型(存储在【栈内存】)
    • number 数值 | string 字符串 | boolean 布尔 | undefined 未定义 | null 空
    • 变量的值永远不会为null, 除非手动设置为null
      • 什么时候需要把变量的值赋值为null
      • 告诉系统不再使用该变量, 可以回收其占用的内存空间
  • 复杂/复合数据类型(指针存栈中,具体数据存储在【堆内存】)
    • Object | Array | Date | Number | Boolean | String
    • null不是对象, js官方的错误: console.log(typeof null); //object
  • 判断数据类型
    • 关键字: typeof
    • 语法: typeof 数据 | 变量
    • 返回值: string

值类型和引用类型

  • 值类型: 简单的数据类型属于值类型
  • 引用类型: 复杂的数据类型
  • 两者区别: 存储的信息不一样
    • 值类型: 存储的是具体的数据
    • 引用类型: 存储的是引用地址, 该地址指向内存中的一块内存空间, 在这个内存空间存储着具体的数据

值类型/引用类型的赋值

  • 赋值: 把右边存储的信息复制一份给左边
  • 值类型的赋值: 把右边存储的信息(具体的数据)复制一份给左边
    • 特点: 只是简单的数据复制, 互相是独立的, 修改其中一个不会影响另外一个
  • 引用类型的赋值: 把右边存储的信息(指向具体的数据的地址)复制一份给左边
    • 特点: 共享同一份数据, 修改其中一个对象的属性的值会影响另一个

值类型/引用类型在函数中的使用

  • 值类型作为函数的参数(值传递): 实参和形参互不影响
  • 引用类型作为函数的参数(地址传递): 实参和形参共享同一份数据, 修改其中一个对象属性的值会影响另一个对象的值
var obj = {name : 'zs'};

    function demo(object) {
        object.name = 'ls';
        object = {name: 'demoName',des :'des'};

        console.log(object.name); // demoName
        console.log(object.des);  // des
    }
    demo(obj);
    console.log(obj.name); // ls
    console.log(obj.des); // undefined (内部的object是函数内部变量,函数执行完毕就销毁了,所以object也没有了)  
    console.log(obj); // {name: "ls"}
    

对象的动态特性

  • 定义: 对已经定义好的对象, 进行一些操作, 删除/增加属性
  • 通过点语法访问对象属性
    • 如果不存在该属性就是增加操作. 如果存在该属性就是修改操作

    • delete删除对象属性

        console.log(delete obj.age);  // undefined
      
  • 通过[]语法访问对象属性
    • 键(属性名)是字符串: obj['key']

in

  1. for..in: 遍历对象的key
  2. 判断对象中是否存在指定的属性
    • 语法: "属性名" in 对象
    • 在数组中的使用, in操作的是索引
      • 怎么判断数组中是否存在指定的元素
        • arr.indexOf(123); //返回数组中某个元素的索引;如果不存在该元素,返回-1
        • 遍历数组-判断是否等于指定元素

delete

  • 定义: 可以删除对象中属性, 删除后该属性为undefined
  • 返回值: 布尔值(表示是否删除成功)
  • 特点
    • 可以删除未使用var声明的变量, 不可删除var声明的变量

        b = 20;
        delete  b;
        console.log(b); //删除成功,所以打印b的值:报错-->表示变量未声明
      
        var a = 10;
        console.log(delete a); // false (静默错误)
        console.log(a); // 10
      
        //未使用var声明的变量是全局变量, 会成为window的属性
        b.dex = 'dex';
        console.log(b.dex); // und
        delete b.dex;
        console.log(delete b.dex);  // true
        console.log(b.dex);   // 报错
      
    • 可以删除直接定义在window上的属性

调试工具的使用

  • 快捷键 F12
  • Console的运行环境和js页面的环境是一样的

异常处理

  • 在正常情况下, 代码如果出现了错误/异常, 该行代码后面的代码不会执行
  • 即使代码出现错误, 后面的代码还是可以正常执行
    • 手动抛出异常throw+异常信息(对象/字符串)
    try{
        //处理可能会出错/异常代码
    }catch(error){
        //try的代码出错就执行, 并把捕获的错误信息抛出
    }finally{
        //此括号中代码与写在下面无区别, 释放一下不再使用的资源-后端使用
        //不管try里面的代码是否出错, 都会执行此括号里的代码
    }

面向对象/面向过程编程

  • 相同点: 都是解决问题的一种思想
  • 不同点: 解决问题的关注点不同.
    • 面向对象关注解决问题所需的对象.
      • 提高代码的复用性, 代码结构易于阅读, 扩充性维护性更好
    • 面向过程关注解决问题 过程中的步骤.

this

  • 特殊情况
    • 在事件指令中, this指向事件源

    • 在定时器中, this指向window

        //若想在定时器里拿到事件源的this
        btn.onclick = function () {
            var that = this;    //备份指针,this指向btn
            window.setInterval(function () {
                console.log(that);  
            },10);
      
        }
      
  • 一般情况
    • this所在的函数是哪个对象, 就指向哪个对象

    • 所有的全局变量都是window的属性, 所有的全局函数都是window的方法(参考W3C)

        (function(){
            var that = this;    //this指向window
            setInterval(function(){
                console.log(that)   
        }, 30);
        })();            
      

面向对象

  • 对象拥有属性和方法

  • 创建对象: var obj = new Object()

  • 函数创建对象常用写法

      function person(){
          var obj= new Object();
          obj.name = 'Marry';
          obj.age = 12;
          return obj;
      }
      person();  //创建了一个Marry对象
      //创建另一个对象
      var Jame = person();
      Jame.name = 'Jame';
      Jame.age = 14;
    

通过构造函数创建对象

  • 定义: 构造函数就是一个函数, 用来初始化一个对象(给对象赋初始值), 一般与new关键字连用

  • 构造函数名称: 首字母大写

       var obj = new Object()
       var dog = new Dog('wangcai', 1)    //如下
    
  • this所在的函数是哪个对象, 就指向哪个对象

      function Dog(name1, age1){
          //new默认(内部实现)创建一个新的对象-默认把这个对象赋值给this
          //var obj = new Object();
          //this = obj;
    
          //自定义属性
          this.name = name1;
          this.age = age1;
          this.eat = function(sth){
          console.log(this.name+'eat'+sth);
    
          //new默认(内部实现)返回新创建的对象
          //return obj;
          }
      }
      var dog = new Dog('wangcai', 1);
      //问题: 创建多个对象时(dog1.eat==dog.eat), 对象中某些方法的实现是一样的, 但每创建一个对象都会创建一个新的函数, 会造成内存资源浪费
      
      //优化-减少定义的形参
      function Dog(option){
          //判断外界是否传实参
          var option = option || {};
          this.name = option.name1;
          this.age = option.age1;
          this.eat = function(sth){
              console.log(this.name+'eat'+sth);
          }
      }
      var dog = new Dog({name:'wangcai', age:1});
    
  • 可以使用原型属性prototype-开发中常用

      //第一种写法
      Dog.prototype.eat = function(sth){
          console.log(this.name+'eat'+sth);
      }
      //第二种写法
      Dog.prototype = {
          eat:function(){
              console.log(this.name+'eat'+sth);
          }
      }
      //_init是一个系统的初始化函数, 只要通过构造函数创建对象就会默认调用
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,716评论 2 17
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,053评论 1 10
  • 一、面向过程和面向对象的区别、联系 1.面向过程编程:注重解决问题的步骤,分析问题需要的每一步,实现函数依次调用。...
    空谷悠阅读 895评论 1 11
  • 1.面向对象一般写法: 2.面向对象传递参数: 3.使用this接收参数: 通过这种方式创建地对象可以作为模板,但...
    MGd阅读 228评论 0 0
  • 开篇废话是一种情怀 在我们开始学习面向对象之前,首先得先想一个问题,那就是何为对象? 在日常生活中我们有男朋友\女...
    西巴撸阅读 513评论 4 3