HTML JavaScript 基础(下)

一、JavaScript 函数

1、普通函数-有函数名

function func(){
}

 

2、匿名函数-无函数名

setInterval(function(){
    console.log(123);
},5000)

  

3、自执行函数

多数情况下可能会引入别人的js,如果别人的js函数重复,会导致一个不能用,为了避免这个问题,把内部所有的功能放到函数里面。做成一个嵌套函数。

但是如果外面的函数名也有重复,怎么处理,就外边的函数没有名字,并且自动执行一下。

自执行函数怎么写呢?

//  ()():第一个括号function,第二个括号传实参。创建函数,并且自动执行
(function(arg){
    console.log(arg);
})(1) 

  

二、JavaScript 序列化及转义

  • 常用的序列化操作

li = [11,22,33,44]
s = JSON.stringify(li)    // 把对象转化为字符串
newL = JSON.parse(s)    // 把字符串转化为对象
  • 转义

比如网上搜一个东西,网址自动变成了%等一些内容

>  url = "https://www.sogou.com/web?query=时间"
<  "https://www.sogou.com/web?query=时间"
>  newUrl = encodeURI(url)                 // 转义
<  "https://www.sogou.com/web?query=%E6%97%B6%E9%97%B4"
>  decodeURI(newUrl)                       // 转回原格式
<  "https://www.sogou.com/web?query=时间"
>  newUrl = encodeURIComponent(url)        // 全部转义
<  "https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E6%97%B6%E9%97%B4"

  

默认http请求不是长链接,连一次就断了,但是网站有保持登录一个月,怎么实现的。

一般登录成功后,网站会给你发一段字符串过来,把它保存在硬盘的某个地方。这就是cookie。

客户端(cookie) => 服务器端 。 将数据经过转义后,保存在cookie

escape( )          // 对字符串转义
unescape( )        // 给转义字符串解码
URIError           // 由URl的编码和解码方法抛出

  

三、eval 以及时间操作

  • eval

在python中:

val = eval(" 1+1 ")    # 表达式
exec(" 1+2 ")      # 比如for循环。但exec只是执行,没有返回值,返回值为None

  

在JavaScript中:

eval :功能是python里eval和exec的合集

  • 时间操作
>  d = new Date()
Mon Nov 28 2016 22:46:33 GMT+0800 (中国标准时间)
>  d.getMinutes()
46
>  n = d.getMinutes() + 12
58
>  d.setMinutes(n)
1480345113329
>  d
Mon Nov 28 2016 22:58:33 GMT+0800 (中国标准时间)

//        Date类
//        var d = new Date()   当前时间 
//        d.getXXX  获取
//        d.setXXX  设置

  

四、JavaScript 作用域

1、JavaScript 以函数作为作用域 (let除外)

  • java、c、c# 等语言是以“{}”代码块 作为作用域的。
  • Python中:作用域是以函数作为作用域的。
  • JavaScript:也是以函数作为作用域的

2、函数的作用域在函数未被调用之前,已经创建

3、函数的作用域存在作用域链,并且也是在被调用之前创建

作用域链:嵌套函数,作用域一层套一层

以下三个示例,分别会输出什么?

        // 示例一:
            xo = "alex";
            function func(){
                // var xo = 'eric';
                function inner(){
                    // var xo = 'tony';
                    console.log(xo);
                }
                inner()
            }
            func() // 返回结果为'alex'

        // 示例二:
            xo = "alex";
            function func(){
                var xo = 'eric';
                function inner(){
                    console.log(xo);
                }
                return inner;
            }
            var ret = func()
            ret() // 返回结果为'eric'

        // 示例三:
            xo = "alex";
            function func(){
                var xo = 'eric';
                function inner(){
                    console.log(xo);
                }
                var xo = 'tony';
                return inner;
            }
            var ret = func()
            ret()      // 返回的是'tony'
// 注:浏览器console中换行,使用shift+回车  

  

  函数的作用域存在作用域链,并且也是在被调用之前创建.

4、函数内局部变量 声明提前

        // 示例一:
        function func(){
            console.log(xxoo);
        }
        func();
        // 程序直接报错

        function func(){
            console.log(xxoo);
            var xxoo = 'alex';
        }
        // 解释过程中:var xxoo;
        func();
        // undefined

  未赋值变量,提前声明为 undefined.

>  var fgf
undefined
>  fgf
undefined

  

五、JavaScript面向对象

  • this代指对象(python self)
  • 创建对象时, new 函数名()
function Foo(n){
    this.name = n;
    this.sayName = function(){
        console.log(this.name);
    }
}

var obj1 = new Foo('we');
obj1.name
obj1.sayName()

var obj2 = new Foo('wee');
obj2.name
obj2.sayName()

  

上面那么写可以,但是有个问题,里面有些内容被重复定义了,sayName这个方法在每个对象里都被重复定义了一次。

  • Python的面向对象:方法保存在类内存中
class Foo:
    def __init__(self,name):
        self.name = name

    def sayName(self):
        print(self.name)

obj1 = Foo('we')
obj2 = Foo('wee')

  

  • JavaScript面向对象 —> 原型:

原型:避免浪费内存资源

function Foo(n){
    this.name = n;
}
// Foo的原型
Foo.prototype = {
    'sayName': function(){
        console.log(this.name)
    }
}

obj1 = new Foo('we');
obj1.sayName()

obj2 = new Foo('wee');

  

六、JavaScript 词法分析解析

如下代码,分别会对应输出什么?

function t1(age){
            console.log(age);   // function age()
            var age = 27;
            console.log(age);   // 27
            function age(){}    // 执行时,因为没有调用,所以执行时不考虑
            console.log(age);   // 27
        }

t1(3);

  

active object ——> 简称AO 
1. 形式参数 
2. 局部变量 
3. 函数声明表达式(优先级比较高) 


下面开始分析:

  • 形式参数: 
    AO.age = 3;
  • 局部变量: 
    AO.age = 27;
  • 函数声明表达式 
    AO.age = function()

作用域值的分析,也可以通过词法分析,去分析。具体的词性分析内容见另一篇博文:

http://www.cnblogs.com/zoe233/p/7507828.html

原文地址:https://www.cnblogs.com/zoe233/p/8027149.html