前端概念复习和VUE初学

前端概念复习和VUE初学

昨天进展到了JS的变量提升，接着昨天的进度开始

疑问：

1.严格模式下使用构造函数时，如果忘了加new，this不再指向全局对象，而是报错。（啥意思？）

function f(){
    "use strict";
    this.a = 1;
};
f();// 报错，this未定义

问题已经解决，文末给出解释。

任务一：JS语法复习

question1：变量提升

函数和变量声明总是被放到顶部，意味着可以先使用后声明

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x  

初始化不提升 ，下面代码的输出x 为：5，y 为：undefined

 var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x + " " + y;           // 显示 x 和 y

var y = 7; // 初始化 y  

question2：严格模式

不允许使用未声明的变量：

不允许删除变量或对象。

不允许删除函数。

不允许变量重名

"use strict";
function x(p1, p1) {};   // 报错

不允许使用八进制:

"use strict";
var x = 010;             // 报错

不允许使用转义字符:

"use strict";
var x = \010;            // 报错

不允许对只读属性赋值:

"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14;            // 报错  

禁止this关键字指向全局对象。

function f(){
    return !this;
} 
// 返回false，因为"this"指向全局对象，"!this"就是false

function f(){ 
    "use strict";
    return !this;
} 
// 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。

不允许对一个使用getter方法读取的属性进行赋值

"use strict";
var obj = {get x() {return 0} };

obj.x = 3.14;            // 报错

为了向将来Javascript的新版本过渡，严格模式新增了一些保留关键字：

implements interface let package private protected public static yield

"use strict";
var public = 1500;      // 报错

question3：浮点数精度问题

想用有限的位来表示无穷的数字，显然是不可能的，因此会出现一些列精度问题：

浮点数精度问题，比如 0.1 + 0.2 !== 0.3

大数精度问题，比如 9999 9999 9999 9999 == 1000 0000 0000 0000 1

toFixed 四舍五入结果不准确，比如 1.335.toFixed(2) == 1.33

目前已经有了很多较为成熟的库，比如 bignumber.js，decimal.js，以及big.js等。我们可以根据自己的需求来选择对应的工具。

教程中提到的parseFloat(result.toFixed(12));进行四舍五入，还有先浮点数变整数0.1 + 0.2转化为(1*2)/3。可是这些方法都不大行。

question4：this指向谁

this指向对象，指向的对象也是函数的调用者。

function func(){
            console.log(this);
        }
        //① 通过函数名()直接调用：this指向window
        func(); // this--->window

function func(){
           console.log(this);
        }

//② 通过对象.函数名()调用的：this指向这个对象
           // 狭义对象
            var obj = {
                name:"obj",
                func1 :func
            };
            obj.func1(); // this--->obj
            

        // 广义对象
        document.getElementById("div").onclick = function(){
            this.style.backgroundColor = "red";
        }; // this--->div

function func(){
            console.log(this);
        }
        
//③ 函数作为数组的一个元素，通过数组下标调用的：this指向这个数组
        var arr = [func,1,2,3];
        arr[0]();  // this--->arr

function func(){
            console.log(this);
        }
        

//④ 函数作为window内置函数的回调函数调用：this指向window，（ setInterval ///setTimeout 等）
        setTimeout(func,1000);// this--->window
        //setInterval(func,1000);

function func(){
            console.log(this);
        }
//⑤ 函数作为构造函数，用new关键字调用时：this指向新new出的对象
        var obj = new func(); //this--->new出的新obj

question5:块级作用域

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

{ 
    let x = 2;
}
// 这里不能使用 x 变量

但是var不受块的限制

var x = 10;
// 这里输出 x 为 10
{ 
var x = 2;
// 这里输出 x 为 2
}
// 这里输出 x 为 2

为了解决这个问题，我们就用let就好了

var x = 10;
// 这里输出 x 为 10
{ 
let x = 2;
// 这里输出 x 为 2
}
// 这里输出 x 为 10

question6：使用构造函数调用函数

// 构造函数:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName  = arg2;
}
// This    creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。

构造函数中 this 关键字没有任何的值。 this 的值在函数调用实例化对象(new object)时创建。

question7：call和apply() 这个见得很少，等日后遇到更多例子来加深理解，目前对其的作用理解为，可以调用非本对象的方法，对象结构体里面没这么定义，但能把函数拿来用。

var myObject;
function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);    // 返回 20

var myObject, myArray;
function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2]
myObject = myFunction.apply(myObject, myArray);      // 返回 20

两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。

在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象。

在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。

通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。

question8：内嵌函数（基础不够过关，这部分竟然没想起来）

function add() {
var counter = 0;
function plus() {counter += 1;}
plus();    
return counter; 
}//这样可以避免网页上任意脚本修改全局变量的值导致无法计数

question9：json字符串转换为 JavaScript 对象，今日任务大多结束后复习一下json字符串

var text = '{ "sites" : [' +
	'{ "name":"Runoob" , "url":"www.runoob.com" },' +
	'{ "name":"Google" , "url":"www.google.com" },' +
	'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
	
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

任务二：Vue框架学习

question1：CommonJS

CommonJS定义的模块分为：{模块引用(require)} {模块定义(exports)} {模块标识(module)}

require()用来引入外部模块；exports对象用于导出当前模块的方法或变量，唯一的导出口；module对象就代表模块本身。

nodejs是CommonJS规范的实现。

question2：ESM

https://segmentfault.com/a/1190000014318751贴上查到的用图讲解ESM的博客

初读印象不够，其中几个关键点有异步和循环依赖大致理解，需要日后运用中反复。

question3：Vue.js是什么

1.渐进式框架，意味着可以在中途引入vue框架来改善项目

2.视频介绍中Vue可以在控制台改动对象数据，同时修改了页面和后台的js代码

待做任务：JQuery框架的复习

（留到Vue学习完成之后）

疑问解决：首先，this指向调用他的对象，意味着疑问中的this本应该指向window，但严格模式下this指向空，这里用new的意思是用

var A = new f()；//这样是不会报错的，因为this指向了A这个对象。

今日任务进展：

1.js复习基本搞定

2.笔记本上把nodejs npm Vue一条龙装下来，阅读Vue教程到第一个demo处

明日任务要求：

个人对于Vue的难度没有把握，明天继续Vue教程阅读，争取一天之内完成官网教程通读并实现绝大部分demo。如果还有时间就看看json，回忆一下加深印象。