01_JS面向对象

知识点

  • 数据类型
  • 值类型和引用类型
  • 值类型和引用类型的特征
  • 值类型和引用类型做参数
  • 对象的动态特性
  • 给对象动态添加属性
  • 对象属性的访问形式
  • 逻辑中断
  • ||
  • &&
  • delete关键字
  • 异常处理
  • JS复习
  • 循环、分支、break和continue
  • 调试工具的使用
  • 条件断点
  • DOM基本操作
  • 函数声明三种方式

数据类型

  • 基本数据类型
    string number boolean

  • 复杂数据类型(引用类型)
    Array Date Object RegExp String Number Boolean
    Object function
    String Number Date 首字母大写的都是构造函数

  • 如何获取一个数据的数据类型
    使用关键字 typeof
    typeof返回值为string类型

  • 两个空的类型
    null
    undefined

例:对象实例




    
    


    

产品名称

描述

对象

新建对象:new

var now = new Date();

值类型和引用类型

  • 值类型:
      存储的就是数据本身的变量就是值类型
      例如:string 、number、boolean、undefined、null
      值类型是存储在栈(stack)中的简单数据,也就是说,它们的值直接存储在变量访问的位置。
var num = 10;
var str = "hello JS";
var flag = true;
var un = undefined;
var nu = null;

上面定义的这些值类型的数据在内存中的存储如下:


01_JS面向对象_第1张图片
  • 引用类型:
      存储的数据在内存中的地址,数据在内存中单独存储就是引用数据类型
      例如:object、数组、函数
      存储在堆(heap)中的对象,也就是说,存储在变量处的值是一个指针(point),指向存储对象的内存处。
var arr = [1, 2, 3];
var p1 = {name:"张三", age:18};
var p2 = {
    name:"李四",
    age:50,
    son:{
        name:"李小一",
        age:18
    }
};
var p3 = {
    name:"王五",
    age:50,
    children:[
        {
            name:"王小一",
            age:20
        },
        {
            name:"王小二",
            age:15
        },
        {
            name:"王小三",
            age:12
        }
    ]
}

上面定义的这些引用类型的数据在内存中的存储如下:


01_JS面向对象_第2张图片

值类型和引用类型的特征

值类型和引用类型的赋值

值类型赋值,直接将值复制一份

var num1 = 10;
var num2 = num1;

上面两句代码,在内存中的体现为:


01_JS面向对象_第3张图片
  • var num1 = 10;表示变量num1存储的是数字10
  • 将数据拷贝一份,也就是将10拷贝一份,这个时候内存中有两个10
  • 将拷贝的10赋值给num2
引用类型赋值,是将地址复制一份
var p = {name:"张三", age:19};
var p1 = p;

上面两句代码,在内存中的体现为:


01_JS面向对象_第4张图片
  • var p = {name:"张三", age:19};,p中存储的是对象的地址
  • 赋值就是将变量p中存储的数据,也就是地址拷贝一份, 然后将该数据赋值给p1
  • 此时内存中只有 1 个对象,变量p和p1同时指向这个对象

**问题: **利用p1修改的name属性会影响到p中的name

值类型和引用类型做参数

考虑如下情况:输出结果是多少?

function foo(num){
    num++;
}
var a = 1;
foo(a);
console.log(a);

继续考虑如下情况:输出结果是多少?

function foo(o){
    o.age++;
}
var p = {name:"张三", age:19};
foo(p);

console.log(p.age);

总结:
  在调用函数的时候,传参的过程其实就是用实参给形参赋值的过程
  当参数为值类型的时候,函数内和函数外的两个变量完全不同,仅仅只是存的值一样而已,修改时互不影响
  当参数为引用类型的时候,函数内和函数外的两个变量不同,但是共同指向同一个对象,在函数内修改对象数据时会影响外部

扩展:
考虑如下情况:输出结果是多少?

function foo(o){
    o = {name:"张三", age:18};
}
var p;
foo(p);

console.log(p.age);

上面的报错,因为p为undefined

对象的动态特性

  • 给对象动态添加属性
    当一个对象需要某个属性的时候,可以用两种方式为其添加属性
  • 直接使用对象名.属性名 = 值这种形式,为对象添加对应的属性。
  • 使用关联数组语法对象名["属性名"] = 值这种形式,为对象添加对应的属性
//o是一个没有任何自定义属性的对象
var o = {};

//现在想让他拥有name age gender等属性
//直接使用 对象名.属性名 = 值
o.name = "张三";



//使用 对象名["属性名"] = 值
o["age"] = 18;



//可以通过打印查看效果
console.log(o.name);
console.log(o.age);

注意:
当要动态的为一个对象添加属性的时候,必须使用关联数组的方式。

//接收到了用户的输入
var str = prompt("请输入属性名");

o = {};
//o.str = "这是一个新属性"; //这么写是不对的,会给对象新增一个str属性
//正确的写法如下
o[str]="这是一个新属性";
  • 对象属性的访问形式
  • 点语法:对象名.属性名
  • 关联数组:对象名[属性名]
var o = {
    name:"张三",
    sayHello:function(){
        console.log("你好,我叫"+ this.name);
    }
};

//点语法
console.log(o.name);

//关联数组语法
console.log(o["name"]);

//这两种用法同样适用于方法
o.sayHello();
o["sayHello"]();

//可以对这个对象的属性进行遍历,如果是值就打印,如果是方法就调用
for(var k in o){
    if ( typeof o[ k ] == 'function' ) {
        o[ k ]();
    } else {
        console.log( 'log: ' + o[ k ] );
    }
}

动态特性key的类型


逻辑中断

表达式1 || 表达式2
如果表达式1为true,返回表达式1
如果表达式1为false,返回表达式2

var num = 0||2;
console.log(num);//2

表达式1 && 表达式2
如果表达式1为真
  判断表达式2,为真则返回表达式2,为假则返回表达式1
如果表达式1为假
  则直接返回表达式2

delete关键字

  • 可以用来删除对象的属性。
  • 删除未使用var声明的变量。

delete 变量名;

返回值:删除是否成功

  • 如果删除的是不存在的属性返回值也是true
  • 如果删除的属性存在原型当中,那么返回true,当并未删除


异常处理

常见的异常分类

  • 运行环境的多样性导致的异常(浏览器)
  • 语法错误,代码错误

异常最大的特征,就是一旦代码出现异常,后面的代码就不会再执行

异常捕获

捕获异常,使用try-catch语句

try{
    //这里写可能出现异常的代码
}catch(e){
    //这里的e就是捕获的异常对象
    //可以在这里写,出现异常后的处理代码
}

异常捕获语句执行的过程为:

  • 代码正常运行, 如果在try中出现了错误, try 里面出现错误的语句后面的代码都不再执行, 直接跳转到 catch 中
  • catch中处理错误信息
  • 然后继续执行后面的代码
  • 如果 try 中没有出现错误, 那么不走 catch 直接执行后面的代码

通过try-catch语句进行异常捕获之后,代码将会继续执行,而不会中断。
注意:

  • 语法错误异常用try-catch语句无法捕获,因为在预解析阶段,语法错误会直接检测出来,而不会等到运行的时候才报错。
  • try-catch在一般日常开发中基本用不到,但是如果要写框架什么的,用的会非常多。因为这个会让框架变得健壮

抛出异常

如何手动的抛出异常呢?

案例:自己写的一个函数,需要一个参数,如果用户不传参数,此时想直接给用户抛出异常,就需要了解如何抛出异常。



抛出异常使用throw关键字,语法如下:

throw 异常对象;

异常对象一般是用new Error("异常消息"), 也可以使用任意对象

function test(para){
    if(para == undefined){
        throw new Error("请传递参数");
        //这里也可以使用自定义的对象
        throw {"id":1, msg:"参数未传递"};
    }
}

try{
    test();
}catch(e){
    console.log(e);
}

异常的传递机制

function f1 () {
    f2(); // f1 称为调用者, 或主调函数, f2 称为被调用者, 或被调函数
}

function f2 () {
    f3();
}

function f3() {
    throw new Error( 'error' );
}
f1();

当在被调函数内发生异常的时候,异常会一级一级往上抛出。

异常捕获语句的完整模式

异常捕获语句的完整模式为try-catch-finally

try {
    //可能出现错误的代码
} catch ( e ) {
    //如果出现错误就执行
} finally {
    //结束 try 这个代码块之前执行, 即最后执行
}

finally中的代码,不管有没有发生异常,都会执行。一般用在后端语言中,用来释放资源,JavaScript中很少会用到

注意:语法异常try..catch..无法捕获



JS复习

JS中的循环
  • for
  • while
  • do..while
  • for..in
JS中分支
  • if..else..
  • switch..case..
break和continue

continue跳出本次循环,继续下次循环, continue下面的代码不在执行
break终止循环。

调试工具的使用

开启调试窗口

windows 平台: f12

调试窗口介绍
  • 指针: 选择页面中的元素
  • 手机: 使用移动端界面调试
  • Elements: 查看页面 DOM 树
  • Console: 控制台(注意, 控制台与该页面是一个整体, 在控制台中的任何操作, 会影响到页面)
  • Source: 代码调试
调试工具的使用
  • 逐过程运行, 一次运行一个函数
  • 单步运行(逐步运行), 一次运行一句, 如果是函数, 进入函数体内运行
  • 继续运行. 从当前状态运行下去, 直到出现断点, 如果没有断点则运行结束
设置断点技巧
  • 逐步与逐过程混合
  • 断点加继续运行
  • 条件断点(右键添加 add contitional breakpoint)

利用 watch 监视窗口可以查看对象成员

条件断点

  • add conditional breakpointer


    01_JS面向对象_第5张图片
  • 设置条件:i==985


    01_JS面向对象_第6张图片

    按下回车,刷新页面,当i==985的时候才会进入断点

  • 激活/取消激活断点


  • 出现异常暂停


DOM基本操作

增删改查

获取元素操作
  • getElementById
  • getElementsByTagName
  • getElementsByClassName
元素节点操作
  • appendChild
  • insertBefore
  • removeChild
  • replaceChild
  • cloneNode
  • createElement
  • createTextNode(创建文本节点)
属性节点操作
  • getAttribute
  • setAttribute
  • removeAttribute
常用DOM属性
  • className
  • innerHTML
  • innerText/textContent value
  • children

Function

函数声明

  • 基本的函数声明方式
function funcName(){
    //函数体
}
  • 函数表达式
    在使用函数表达式声明函数的时候,function后面可以跟函数名
    但是这个函数名只限在内部使用,在外部无法访问。
var funcName1 = function name1(){
    //函数体
}
  • new Function
var func1 = new Function();

你可能感兴趣的:(01_JS面向对象)