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()
        })()

    })()
时间: 2024-08-26 01:16:45

javascript一些比较难理解的知识点的相关文章

Javascript之旅——第十站:为什么都说闭包难理解呢?

原文:Javascript之旅--第十站:为什么都说闭包难理解呢? 研究过js的朋友大多会说,理解了js的原型和闭包就可以了,然后又说这些都是js的高级内容,然后就又扯到了各种神马的作用域...然后不少 人就会被忽悠的云里雾里...下面我也试着来说说闭包,看我说的这个是否浅显易懂... 一:闭包含义 闭包是个专业词汇,这样才能显得在js中是高大上的货色,官方定义我这里就不敢修改它,定义如下:就是有权访问另一个函数作用域的变量的函数. 二:一个简单的场景 上面的定义大概也能看得懂,但是不知道为什么

对JavaScript闭包和原型理解

最近在学js脚本的一些东西觉得里面有2个知识点比较难理解所以做了如下总结. 1.闭包 简单的理解:一个函数a ,内部有个函数b,那么这个函数b当被作为a函数的返回值得时候被外部的全局变量引用了,那么这就是一个闭包. 官方解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 如: a=function() { var n=1; b=function( n=n+1; alert(n) } return b; } var c=a()aler

对JavaScript中闭包的理解

相信很多人都有看过关于闭包的文章,但是真正意义上的了解清楚的也不多,今天我们就来谈谈对闭包的理解. 闭包在JavaScript中一直是一个很重要的存在,闭包很重要但是又很难理解,起初我也是这样认为,但只要真的清楚之后,你会觉得很有趣. 我们先来看一个闭包的例子: 1 function foo() { 2 let a = 2; 3 function bar() { 4 console.log(a); 5 } 6 return bar; 7 } 8 let baz = foo(); 9 baz();

JavaScript原型链的理解

一.原型链的概念 JavaScript是一门面向对象的编程语言,JavaScript 中的所有事物都是对象,并且对象与对象之间不是彼此独立的,而是有"继承"关系的. 这种"继承"关系与Java或者C#中的继承不同.Java或C#中是有类的概念的,子类继承父类,通过extends关键字实现:而JavaScript中没有真正意义上的class(类),但有与之类似的概念--原型对象:A继承B,则A的"__proto__"属性会指向B的"pro

JavaScript 模块化入门Ⅰ:理解模块

作为一名JS初学者.假如你听到了一些诸如"模块化构建&模块化载入" "Webpack&Browserify" 或者 "AMD&CMD"之类的术语,肯定瞬间就凌乱了. JavaScript的模块化听起来挺深奥,可其实理解它对开发者来说特别实用. 在这篇文章里,我会尽量深入浅出地把这些深奥的术语翻译成浅显易懂的人话(加上一些代码示例).希望你多少能从中学到点东西. 为了避免长篇大论,整个内容会分为两篇文章,这是第一部分,主要介

javascript this的范围理解

<html> <head> <title>javascript this的范围理解</title> </head> <body> <script type="text/javascript"> //在javascript中,函数总是在一个特殊的上下文执行(称为执行上下文),如果你将一个对象的函数赋值给另外一个变量的话,这个函数的执行上下文就变为这个变量的上下文了 window.name = "

网络传输的加密与解密(不是很难理解的一个版本)

--网络传输的加密与解密--    由于互联网早期并没有考虑到数据报文安全的问题,早期的理念都是基于进行通信的.现在随着网络兴起,互联网上慢慢有很多"犯罪团体",用较低的犯罪成本通常是基于一个网络通信协议的一个小的漏洞来完成窃取.篡改.重播其他人的数据报文. 而往往计算机网络安全维护者和那些恶意攻击者玩的就是一个类似猫鼠游戏,网络安全维护者处处考虑对计算机的安全负责,而恶意攻击者处处找安全的漏洞.而对于那些恶意攻击方式大体分两种. 一种叫被动攻击,大体上来说就是窃听,攻击者获得传输信息

hdu 1301 Jungle Roads 一个很水的题 AC率也可以知道了 但是题目很难理解啊 英语渣o(╯□╰)oKruskal算法

Jungle Roads Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 4725    Accepted Submission(s): 3471 Problem Description The Head Elder of the tropical island of Lagrishan has a problem. A burst o

第二话:javascript中闭包的理解

闭包是什么? 通过闭包,子函数得以访问父函数的上下文环境,即使父函数已经结束执行. OK,我来简单叙述下,先上图. 都知道函数是javascript整个世界,对象是函数,方法是函数,并且js中实质性的面向对象相关也都是函数来实现和延伸,例如:"类". window:是指js中window类,也是js最高一层,因为什么这么说,因为你所有创建的方法和属性其实都在window之内.window中的所有方法,在自己创建的方法中都可以调到.可以仔细想想alert,在任何地方都可以alert,其实