前端学习总结

Posted 2020-10-11

前端学习总结

<$1> 代表重点1,<#1> 代表引用重点1

脚本javascript

1.变量作用域

JavaScript通过函数管理变量作用域。在函数内部声明的变量只在这个函数内部，函数外面不可用。<$1> 另一方面，全局变量就是在任何函数外面声明的或是未声明直接简单使用的。

每个JavaScript环境有一个全局对象，当你在任意的函数外面使用this的时候可以访问到。 你创建的每一个全部变量都成了这个全局对象的属 性。在浏览器中，方便起见，该全局对象有个附加属性叫做window，此window(通常)指向该全局对象本身。下面的代码片段显示了如何在浏览器环境 中创建和访问的全局变量：

var myglobal = "hello"; console.log(myglobal); // "hello" console.log(window.myglobal); // "hello" console.log(window["myglobal"]); // "hello" console.log(this.myglobal); // "hello"

理解 . [] this 含义

局部变量和全局变量的区别

代码案例1.1

function handsomeToUgly()

结果:输出 handsome

function handsomeToUgly()

结果: 先输出undinfed ,后输出ugly

function test()

结果:先输出 Hello ,后输出 World

结论:变量是存在作用域区别;javascript在执行时,会先对函数片段进行解析,而不是从上至下执行;<$2>函数片段执行时,先从local scope加载变量;变量没有在函数中声明,则从全局变量中寻找;没有则为 undinfed

补充: 变量分为 1,未声明;(‘undinfed‘)2,声明未赋值;(‘undinfed‘)3,声明且赋值;

2.Object

Object

Object对象，是所有JavaScript对象的超类(基类)。Object.prototype(Obecjt的原型)定义了Js对象的基本方法和属性。

Object 代码2.1

var obj=new Object(123); console.log(‘obj的类型为‘+obj+‘\n typeof obj 的结果为‘+typeof obj);

new Object(value) ：根据value的值，返回不同的对象(Number、Boolean、String)

Object 代码2.2 proto 和 prototype

function People(name) 

原型对象拥有.prototype属性，而对象的引用包含.__proto__属性;

巧记 :__proto__ 两个线穿针引线,是引用.

如果在一个函数前面带上new来调用该函数，那么将创建一个隐藏连接到该函数的prototype成员的新对象

Object 代码2.3

function (name) 

Object 代码2.4 <疑问>

function JSClass()

Object 代码2.5 this

this指向函数执行时的当前对象。

function()

• this关键字虽然是在someone.showName中声明的，但运行的时候是other.showName，所以this指向other.showName函数的当前对象
• this在Javascript中和执行环境有关，而和声明环境无关。<$4>

当没有明确的执行时的当前对象时，this指向全局对象window。

Object 代码2.6 this <疑惑>

function()

Object 代码2.7 Construct

function People(name) 

var o={}; console.log(o.constructor === Object); // true ：对象的引用的constructor 等于 原型对象

3.对象属性

• 假设读取某个对象的属性x，首先会在此对象的实例属性中查找。若没有找到，将会在此对象的原型对象中查找属性x
• 对象中的属性，根据是否自身的可分为自有属性和继承属性
• 属性的访问方式 可分为 ‘ . ‘点访问方式和‘ [ ] ‘中括号方法方式 。
• [] 访问方式说明：属性名称可以为一个静态字符串，也可以为一个变量。若为变量，访问的属性为变量表示的值。

4.函数声明和函数表达式

闭包函数4.1

闭包(closure)的技术是为了模拟“类”

封装私有属性 代码4.1

function funA() 

关于闭包的原理

1: 当函数Fun被定义时，JS会把当前有效的Scope Chain保存在函数对象当中备查. 2: 当一个函数被执行时，会创建一个新的Scope Object，再将函数内容完全分析一遍，将参数和局部变量都加成新Scope对象的属性，最后将新Scope Object作为Scope Chain的最后一节，更新Scope Chain。

模拟类 代码4.2

function Person(firstName, lastName, age)
    

var 和 this 的区别

代码2 中,新建对象 var p=new Person(‘Bill‘,‘Gates‘,60); 无法获得 var声明的_firstName(非全局变量),是因为变量声明在函数中; this 声明的变量,this指向p中的60,且Person.age也无法获得值

5.命名空间

代码5.1

function(color) 

代码5.2

function(namespace) 

• (function(arg){…})(param)
• 相当于定义了一个参数为arg的匿名函数(并且这个匿名函数立即执行)，并且将param作为参数来调用这个匿名函数

代码5.3

function(arg)

将函数定义在命名空间中的方法.

代码5.4

即时获得 dom 列表下标

function(index)

立即执行的函数

(function foo(){})(); (function foo(args){alert(args)})(1);

JavaScript标准规定的类型

JavaScript标准中规定了9种类型:Undefined Null Boolean String Number Object Reference List Completion 其中，Reference List Completion三种类型仅供语言解析运行时使用，无法从程序中直接访问.

typeof获取变量类型名称的字符串表示，他可能得到的结果有6种：string、bool、number、undefined、object、function

Type	Result
Undefined	"undefined"
Null	"object"
Boolean	"boolean"
Number	"number"
String	"string"
Object (native and doesn‘t implement [[call]])	"object"
Object (native and implements [[call]])	"function"
Object (host)	Implementation-dependent

if ("undefined" === typeof jQuery) { throw new Error("Dayspring\‘s javaScript requires jQuery."); }