Day12 JavaScript

简介: JavaScript
函数
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script text="text/javascript">

        /*
            函数:
                函数也是一个对象
                函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)
                函数中可以保存一些代码在需要时使用

                创建一个函数对象
                    var fun = new Function();
                    使用typeof检查一个函数对象时,会返回function
                    可以将要封装的代码以字符串的形式传递给构造函数
                    封装到函数中的代码不会立即执行
                    函数中的代码会在函数调用的时侯执行
                    调用函数语法:
                        函数对象()
                    当调用函数时,函数中封装的代码会按照顺序执行

                使用函数声明来创建一个函数
                    语法:
                        function函数名([形参1,形参2,...形参N]){
                            语句
                        }
                
                使用函数表达式来创建一个函数
                    语法:
                        var 函数名 = function([形参1,形参2...形参N]){
                            语句...
                        }

        */
        var fun = new Function("console.log('BanQ');");
        fun();

        function fun1() {
            console.log('BanQ');
        }
        fun1();

        var fun2 = function () {
            console.log('BanQ');
        }
        fun2();


        /*
            函数的参数:
                可以在函数的(()中来指定一个或多个形参(形式参数)
                多个形参之间使用,隔开,声明形参就相当于在函数内部声明了对应的变量

                在调用函数时,可以在()中指定实参(实际参数)
                实参将会赋值给函数中对应的形参

                调用函数时解析器不会检查实参的类型,
                所以要注意,是否有可能会接收到非法的参数,如果有可能则需要对参数进行类型的检查
                函数的实参可以是任意的数据类型

                调用函数时,解析器也不会检查实参的数量
                多余实参不会被赋值
                如果实参的数量少于形参的数量,则没有对应实参的形参将是undefined

                实参可以是任意的数据类型,也可以是一个对象
                当我们的参数过多时,可以将参数封装到一个对象中,然后通过对象传递

                实参可以是一个对象,也可以是一个函数


        */
        var sum = function (a, b) {
            console.log(a + b);
        }
        sum(1, 2);


        /*
            函数的返回值:
                可以使用return来设置函数的返回值
                    语法:
                        return 值

                return后的值将会作为函数的执行结果返回
                在函数中return后的语句都不会执行

                如果return语句后不跟任何值就相当于返回一个undefined
                如果函数中不写return,则也会返回undefined

                return后可以返回任意类型的值,也可以是一个对象,也可以是一个函数


        */
        var result = function (a, b) {
            return a + b;
        }
        console.log(result(1, 2));//输出 a+b 的结果


        /*
            立即执行的函数:
                函数定义完,立即被调用,这种函数叫做立即执行函数
                立即执行函数往往只会执行一次
                语法:
                    函数对象()
        */
        (
            function () {
                console.log("BanQ");
            }
        )();


    </script>

</head>

<body>

</body>

</html>
方法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script text="text/javascript">

        /*
            方法:
                函数也可以称为对象的属性,
                如果一个函数作为一个对象的属性保存,那么我们称这个函数时这个对象的方法
                调用这个函数就说调用对象的方法(method)
                但是它和函数只是名称上的区别,没有其他的区别

        */
       var num = 123;
        console.log(num.toString());

    </script>

</head>

<body>

</body>

</html>
作用域
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script text="text/javascript">

        /*
            作用域
                作用域指一个变量的作用的范围
                在JS中一共有两种作用域。
                    全局作用域
                        直接编写在script标签中的JS代码,都在全局作用域
                        全局作用域在页面打开时创建,在页面关团时销毁

                        在全局作用域中有一个全局对象window,
                        它代表的是一个浏览器的窗口,它由浏览器创建,我们可以直接使用
                        
                        在全局作用域中,
                            创建的变量都会作为window对象的属性保存
                            创建的函数都会作为window对象的方法保存


                    函数作用域
                        调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁
                        每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的

                        在函数作用域中可以访问到全局作用域的变量
                        在全局作用域中无法访间到函数作用域的变量

                        当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用
                            如果没有则向上一级作用域中寻找,直到找到全局作用域,
                            如果全局作用域中依然没有找到,则会报错ReferenceErrorl

                在函数中,不适用var声明的变量都会成为全局变量

                定义形参就相当于在函数作用域中声明了变量

        */
        var fun = function () {
            var a = 1;
            console.log(a);
        }
        console.log(a);//输出 undefined

        var a = 1;
        console.log(window.a);//输出 1
        console.log(window.fun());//输出 1

        /*
            变量的声明提前
                使用var关键字声明的变量,会在所有的代码执行之前被声明(但是不会赋值)
                但是如果声明变量时不适用var关键字,则变量不会被声明提前

            函数的声明提前
                使用函数声明形式创建的函数function函数(){}
                它会在所有的代码执行之前就被创建,所以我们可以在函数声明前来调用函数
                使用函数表达式创建的函数。不会被声明提前,所以不能在声明前调用

            在函数作用域也有声明提前的特性
                使用var关键字声明的变量,会在函数中所有的代码执行之前被声明
                函数声明也会在函数中所有的代码执行之前执行
        */

        fun1();//不报错
        fun2();//报错

        function fun1() {
            console.log("BanQ");
        }

        var fun2 = function () {
            console.log("BanQ");
        }

    </script>

</head>

<body>

</body>

</html>
this
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script text="text/javascript">

        /*
            this:
                解析器在调用函数每次都会向函数内部传递进一个隐含的参数
                这个隐含的参数就是this
                this指向的是一个对象
                这个对象我们称为函数执行的上下文对象
                根据函数的调用方式的不同,this会指向不同的对象
                    以函数的形式调用时,this永远都是window
                    以方法的形式调用时,this就是调用方法的那个对象



        */
        function fun(a,b){
            console.log(this);//输出 Window....
        }

        fun();

    </script>

</head>

<body>

</body>

</html>
构造函数
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script text="javascript">

        /*
            构造函数:
                使用工厂方法创建的对象,使用的构造函数都是Object
                所以创建的对象都是Object这个类型
                就导致我们无法区分出多种不同类型的对象

                创建一个构造函数,专门用来创建Person对象的
                构造函数就是一个昔通的函教,创建方式和普通函数没有区别,
                不同的是构造函数习惯上首字母大写

                构造函数和昔通函数的区别就是调用方式的不同
                    普通函数是直接调用,而构造函数需要使用new关键字来调用

                构造函数的执行流程:
                    立刻创建一个新的对象
                    将新建的对象设置为函数中this
                    逐行执行函数中的代码
                    4.将新建的对象作为返回值返回

                使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类。
                我们将通过一个构造函头创建的对象,称为是该类的实例

                使用 instanceof 可以检查一个对象是否是一个类的实例
                    如果是则返回true,否则返回false

                所有的对象都是Object的后代
                所以任何对象和Object做instanceof检查时都会返回true

                this的情况:
                    当以函数的形式调用时,this是window
                    当以方法的形式调用时,谁调用方法this就是谁
                    当以构造函数的形式调用时,this就是新创建的那个对象

        */
        function Person() {
            this.name = "banq";
            this.age = 22;
        }
        var a = Person();//普通函数
        var b = new Person();//构造函数
        console.log(b);//输出 name = 'banq' age = 22
        console.log(b instanceof Person);//输出 true


        /*
            
        */

    </script>

</head>

<body>

</body>

</html>
原型对象
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script text="javascript">

        /*
            原型(prototype):
                我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype
                这个属性对应着一个对象,这个对象就是我们所谓的原型对象

                如果函数作为普通函数调用,prototype没有任何作用
                当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性,
                    指向该构造函数的原型对象,我们可以通过__proto__来访问该属性

                原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,
                我们可以将对象中共有的内容,统一设置到原型对象中

                当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,
                如果有则直接使用,如果没有则会去原型对象中寻找,如果找到则直接使用

                以后我们创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中,
                这样不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法了

                使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true
                可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
                    使用该方法只有当对象自身中含有属性时,才会返回true

                原型对象也是对象,所以它也有原型,
                当我们使用一个对象的居性或方法时,会现在自身中寻找,
                    自身中如果有,则直接使用,
                    如果没有则去原型对象中寻找,如果原型对象中与,则使用,
                    如果没有则去原型的原型中寻找,直到找到Object对象的原型
                    object对象的原型没有原型,如果在object中依然没有找到,则返回undefined

        */

        function A() {

        }
        function B() {

        }
        console.log(A.prototype == B.prototype);//输出 false

        var a = new A();
        console.log(a.__proto__);//输出 Object
        console.log(a.__proto__ == A.prototype);//输出 true

        // 向原型对象中添加属性
        A.prototype.test = "BanQ";
        console.log(a.test);//输出 BanQ

        // 寻找该对象中是否有该属性
        console.log(a.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//输出 true


        /*
            当我们直接在页面中打印一个对象时,实际上是输出的对象的toString()方法的返回值
            如果我们希望在输出对象时不输出[object object],可以为对象添加一个toString()方法
        */
        function Person() {

        }
        var c = new Person();
        console.log(c);//输出 Person
        console.log(c.toString());//输出 Object
        c.toString = function () {
            return "BanQ";
        }
        console.log(c);


    </script>

</head>

<body>

</body>

</html>
目录
相关文章
|
8月前
|
JavaScript 前端开发
JavaScript小练习
JavaScript小练习
|
9月前
|
存储 JavaScript 前端开发
JavaScript Day01 初识JavaScript 2
JavaScript Day01 初识JavaScript
34 0
|
12月前
|
JavaScript 前端开发
|
JavaScript 前端开发
Javascript的特点
Javascript的特点
55 0
|
存储 JavaScript 前端开发
【初识JavaScript-03】
【初识JavaScript-03】
74 0
【初识JavaScript-03】
|
编解码 JavaScript 前端开发
初识JavaScript
初识JavaScript
187 0
初识JavaScript
|
JavaScript 前端开发 Android开发
JavaScript小技巧
牙叔教程 简单易懂
149 0
|
JavaScript 前端开发
玩转Javascript魔法篇
这些都是平时我们经常在业务中会用的功能,实现起来的方法不止一种,但是我们要经常思考,举一反三,追求一种简洁高效的写法,不是吗?
87 0
玩转Javascript魔法篇
|
JavaScript 前端开发 编译器
什么是Javascript Hoisting?
本文重点通过实例来讲解Javascript Hoisting的内部细节原理。
612 0
什么是Javascript Hoisting?