JS面向对象基础2

时间:2022-05-05 11:19:27

根据之前看了面向对象相关的视频,按照自己的理解,整理出相关的笔记,以便自己的深入理解。

javascript面向对象:

JS面向对象基础2

突发奇想,注意:===全等:是指既比较值,也比较类型(题外话,可忽略)

JS面向对象基础2

JS面向对象基础2

JS面向对象基础2

JS面向对象基础2

逻辑运算符(短路),如果前面num=num是真,则直接返回,是不会对后面”没有参数“这个进行运算。||(或)

JS面向对象基础2

框架中常用到的验证(做能力检测的技巧):

JS面向对象基础2

1、Delect用法:

JS面向对象基础2

例子1:

JS面向对象基础2

JS面向对象基础2

结论:删除数组中,只会删除掉这个数字,而该显示的长度是没有改变的,因为该删除的数字3被赋值为underfined。

例子2:

JS面向对象基础2

在查看元素中,按F11可以进行查阅代码的一步一步的进行情况:

JS面向对象基础2

JS面向对象基础2

结论:可以删除一个对象中的属性与方法。

例子3:

JS面向对象基础2

JS面向对象基础2

结论:规则就是:只能删除没有var声明的变量,有var声明的不能删除。

2、异常处理(报错):

JS面向对象基础2

JS面向对象基础2

JS面向对象基础2

例子:

JS面向对象基础2

在查看元素中显示结果如下:

JS面向对象基础2

注意:自己抛出错误:

JS面向对象基础2

JS面向对象基础2

3、函数的创建(有三种):

JS面向对象基础2

注意:函数的声明式是没有分号结尾的,有分号结尾的是表达式,函数的声明式是不允许有表达式出现的,但是函数的字面量(表达式也是字面量)可以出现在任意一个地方,声明可以在前面调用。

JS面向对象基础2

表达式在前面无法调用fn(),函数的字面量是:表达式的存在,是将一个表达式function(){ };赋值给变量var fn。后面一定要有分号。

JS面向对象基础2

注意:

JS面向对象基础2

凡是出现在表达式 中的函数声明,要么报错,要么自动转换成表达式,会自动转换成系统所需要的布尔类型或者是数值等等

JS面向对象基础2

例子:

if (true){
       function f(){
              console.log(123);
       }
}
f();
 
注意:
 function f(){console.log(123);   } 这个是声明,浏览器在第一遍读取的时候,不管你是什么,都会将function f(){console.log(123); }这个声明的部分提取出来。
 
看浏览器的运行流程:
JS面向对象基础2
 当断点在if (true)这个的时候,按“往下走一步”的时候,直接跳到f()这一个断点里,浏览器是会直接忽略里面的function f(){console.log(123);   } 这个声明;
JS面向对象基础2

注意:因为代码再一步一步执行的时候,根本不看这个声明,有跟没有是一样的,凡是声明,浏览器会忽略,

例如:var f =function func(){   }; 
 
这句话是正确的,浏览器是不会报错的,function func(){   }这个函数部分是表达式,不是声明,有冒号。
 
如果在这个表达式的前面调用函数: func();   var f =function func(){   };
会显示:

JS面向对象基础2

因为表达式无法在前面调用函数。
 
注意:当你将这样的代码:var f =function func(){   } 写在表达式中的时候,浏览器会自动转换成表达式。
 
例如:
JS面向对象基础2

while (函数写在这里,这里是表达式的位置){ },将函数写在圆括号里面,就不叫声明,而是表达式,写在圆括号里面的函数,要么报错,要么自动转换成表达式。

4、什么是面向对象 ?

从3个方向去谈:
1、面向对象的思想过程中的异同:
2、在JavaScript中,面向对象的表达形式:
3、在其他语言,面向对象的表达形式:
 
面向对象与面向过程的区别:
JS面向对象基础2

个人总结:

在传统面向对象中,是一步一步亲力亲为去做,一步都不能错。这叫做过程,一步一步的执行。
 
在面向过程中(传统面向对象中),是一步一步的去完成,一步都不能错,相当于一个执行者。而面向对象是:将这一个事情交给一个有能力的人去完成,将你这个执行者变成调动者(或者说是管理者),这个调动者就是找到这个对象,让它去执行。一种思想的转变。
 
再回到上面的例子:在jq的面向对象中,面向对象是直接告诉 jq:我要这样一个<p>标签。然后加到body里面。
 
面向对象是对面向过程的封装。

例子:给<div> </div> 和 <p> </p>添加边框

传统面向对象:

JS面向对象基础2

也可以:

JS面向对象基础2

改良:

JS面向对象基础2

为让函数更好用,修改一下函数名:

JS面向对象基础2

题外话:全局污染

JS面向对象基础2

console.log(a) 是可以访问到var a=123,是一个全局变量

例子:

JS面向对象基础2

代码一步一步往下解析,又遇到同样的var a,浏览器会默认将第二个var a=123  转换成a

JS面向对象基础2

为什么要有面向对象:

最简方式:

JS面向对象基础2

这个tag方法采用的不是等号,而是冒号的方式。同时也在圆括号里传递参数tagName.访问的时候,直接用itacast去访问执行。
id同上。
JS面向对象基础2

形式参数:占位符,形式参数就是公式里面用来替换数据的变量。

注意:面向对象的优势:

将一个复杂的结构进行封装,并且让我们全局作用域下的污染变得更少,在封装我们面向对象的时候还有一个优势是:将我们所有功能相近的代码组合到一个对象的下面,这样在维护的时候,也更加的方便,容易找出它的那些错误。

5、面向对象的形式组织结构

JS面向对象基础2

这样的一个好处是:将所有的这样一个功能,归类到一个属性下面,将功能进行归类,在全局作用域里面,只有一个对象(itcase)存在,但是它又可以灵活的去使用这个对象里面的每一个模块,每一个都将变成一个模块:

JS面向对象基础2

同时在维护起来,将更加的方便。