zoukankan      html  css  js  c++  java
  • javascript一些比较难理解的知识点

    原文出处:https://segmentfault.com/a/1190000010371988

    看了一下这篇文章,自己也手敲了一遍

        //1、 立即执行函数   作用:将var变量的作用域限制于函数内,这样可以避免命名冲突。注意:避免报错 在开头加分号
    
        ;
        (function() {
            console.log("1、立即执行函数")
        })()
    
        //2、闭包   
        ;
        (function() {
            console.group("2、闭包")
    
            function f1() {
                var n = 0
    
                function f2() {
                    n++
                    console.log("n=" + n)
                }
                return f2
            }
            var result = f1()
    
            try {
                console.log(n) //undefind 
            } catch(e) {
                //            console.log(e)
            }
    
            result() //输出1
            result() //输出2
            result() //输出3
            console.groupEnd()
        })()
    
        //3、使用闭包定义私有变量
    
        ;
        (function() {
            console.group("3、使用闭包定义私有变量")
    
            function Pronduct() {
                //            this.name = "mike";
                var name
    
                this.setName = function(v) {
                    name = v
                }
                this.getName = function() {
                    return name
                }
            }
    
            var k = new Pronduct()
            k.setName('amy')
            console.log(k.name) //undefined
            console.log(k.getName()) //输出amy
            console.groupEnd()
        })()
    
        //4、prototype
        //每个JavaScript构造函数都有一个prototype属性,用于设置所有实例对象需要共享的属性和方法。
        //prototype属性不能列举。JavaScript仅支持通过prototype属性进行继承属性和方法。
    
        ;
        (function() {
            console.group("4.prototype")
    
            function Rectangle(x, y) {
                this._length = x;
                this._breadth = y;
            }
            Rectangle.prototype.getData = function() {
                return {
                    length: this._length,
                    breadth: this._breadth
                }
            }
            var x = new Rectangle(3, 4);
            var y = new Rectangle(5, 8);
            console.log(x.getData()) //输出{length:3,breadth:4}
            console.log(y.getData()) //输出{length:5,breadth:8}
            console.groupEnd()
        })()
    
        //5、模块化
        ;
        (function() {
            console.group("5.模块化")
            var module = (function() {
                var N = 5;
    
                function print(x) {
                    console.log("The result is:" + x)
                }
    
                function add(a) {
                    var x = a + N;
                    print(x)
                }
                return {
                    description: "This is descriptione",
                    add: add
                }
            })()
    
            console.log(module.description) //输出 "This is descriptione"
            module.add(5) //输出 The result is:10
            console.groupEnd()
        })()
    
        //6.变量提升
    
        //JavaScript会将所有变量和函数声明移动到它的作用域的最前面,这就是所谓的变量提升(Hoisting)。
        //也就是说,无论你在什么地方声明变量和函数,
        //解释器都会将它们移动到作用域的最前面。因此我们可以先使用变量和函数,而后声明它们。
    
        //7、柯里华
        //柯里化,即Currying,可以是函数变得更加灵活。我们可以一次性传入多个参数调用它;
        //也可以只传入一部分参数来调用它,让它返回一个函数去处理剩下的参数。
        ;
        (function() {
            console.group('7.柯里华')
            var add = function(x) {
                return function(y) {
                    return x + y;
                }
            }
            console.log(add(1)(1)) //输出2
            var add1 = add(1)
            console.log(add1(2)) //输出3
            var add10 = add(10)
            console.log(add10(2)) //输出12
            console.groupEnd()
        })()
    
        //8.apply,call与bind方法
        //call  指定this值调用函数
        ;
        (function() {
            console.group('8.apply,call与bind方法')
            var user = {
                name: "mike",
                whatIsYourName: function() {
                    console.log(this.name)
                }
    
            }
            console.group("call")
            user.whatIsYourName() //输出 mike
    
            var user2 = {
                name: "amy"
            }
            user.whatIsYourName.call(user2) //输出amy
            console.groupEnd()
    
            //apply apply方法与call方法类似。两者唯一的不同点在于,apply方法使用数组指定参数,而call方法单独指定:
            ;
            (function() {
                console.group('apply')
                var user = {
                    greet: "hello",
                    greetUser: function(userName, name) {
                        console.log(this.greet + " " + userName + ' ' + name)
                    }
                }
                var user2 = {
                    greet: "hey"
                }
    
                user.greetUser.call(user2, 'mike', "ak") //输出 hey mike ak
                user.greetUser.apply(user2, ['amy', "ak"]) //输出 hey amy ak
                console.groupEnd()
            })()
            //bind 
            ;
            (function() {
                console.group('bind')
                var user = {
                    greet: "Hello!",
                    greetUser: function(userName) {
                        console.log(this.greet + " " + userName);
                    }
                };
    
                var greetHola = user.greetUser.bind({
                    greet: "Hola"
                });
                var greetBonjour = user.greetUser.bind({
                    greet: "Bonjour"
                });
    
                greetHola("Rahul") // 输出"Hola Rahul"
                greetBonjour("Rahul") // 输出"Bonjour Rahul"
                user.greetUser('mike')
                console.groupEnd()
            })()
    
        })()
        
        
  • 相关阅读:
    ASP.Net Core "The type initializer for 'Gdip' threw an exception"
    ERROR 1698 (28000): Access denied for user 'root'@'localhost'
    彻底卸载Xubuntu Kubuntu
    Ubuntu MariaDB PhpMyAdmin
    VMware虚拟机复制后Linux无法上网
    Visual Studio 项目依赖
    Windows 10 关闭Hyper-V
    一个用python写的比特币均线指标
    关于PHP连接上MySQL但不能插入数据
    【原创】关于pyinstaller打包的程序执行出错问题,pyinstaller3.5只支持matplotlib3.0.2已经解决
  • 原文地址:https://www.cnblogs.com/ksunone/p/7273037.html
Copyright © 2011-2022 走看看