javascript要点1

1.IIFE(立即执行函数)

  立即执行函数,即Immediately Invoked Function Expression (IIFE),正如它的名字,就是创建函数的同时立即执行。它没有绑定任何事件,也无需等待任何异步操作:  

  (function() {
    // 代码
  })();
  function(){…}是一个匿名函数,包围它的一对括号将其转换为一个表达式,紧跟其后的一对括号调用了这个函数。立即执行函数也可以理解为立即调用一个匿名函数。立即执行函数最常见的应用场景就是:将var变量的作用域限制于你们函数内,这样可以避免命名冲突。
 
2.prototype
  每个JavaScript构造函数都有一个prototype属性,用于设置所有实例对象需要共享的属性和方法。prototype属性不能列举。JavaScript仅支持通过prototype属性进行继承属性和方法。
  function Rectangle(x, y)
  {
    this._length = x;
    this._breadth = y;
  }
 
  Rectangle.prototype.getDimensions = function()
  {
    return {
      length: this._length,
      breadth: this._breadth
    };
  };
 
  var x = new Rectangle(3, 4);
  var y = new Rectangle(4, 3);
 
  console.log(x.getDimensions()); // { length: 3, breadth: 4 }
  console.log(y.getDimensions()); // { length: 4, breadth: 3 }
  代码中,xy都是构造函数Rectangle创建的对象实例,它们通过prototype继承了getDimensions方法。
 
3.模块化
  JavaScript并非模块化编程语言,至少ES6落地之前都不是。然而对于一个复杂的Web应用,模块化编程是一个最基本的要求。这时,可以使用立即执行函数来实现模块化,正如很多JS库比如jQuery以及我们Fundebug都是这样实现的。
  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 description",
      add: add
    };
  })();
  
  console.log(module.description); // 输出"this is description"
  module.add(5); // 输出“The result is: 10”
  所谓模块化,就是根据需要控制模块内属性与方法的可访问性,即私有或者公开。在代码中,module为一个独立的模块,N为其私有属性,print为其私有方法,decription为其公有属性,add为其共有方法。
 
4.变量提升
  JavaScript会将所有变量和函数声明移动到它的作用域的最前面,这就是所谓的变量提升(Hoisting)。也就是说,无论你在什么地方声明变量和函数,解释器都会将它们移动到作用域的最前面。因此我们可以先使用变量和函数,而后声明它们。
  但是,仅仅是变量声明被提升了,而变量赋值不会被提升。如果你不明白这一点,有时则会出错:
  console.log(y); // 输出undefined
   y = 2; // 初始化y
 
  上面的代码等价于下面的代码:
   var y; // 声明y
   console.log(y); // 输出undefined
   y = 2; // 初始化y
 
  为了避免BUG,开发者应该在每个作用域开始时声明变量和函数。
 
5.柯里化
  柯里化,即Currying,可以是函数变得更加灵活。我们可以一次性传入多个参数调用它;也可以只传入一部分参数来调用它,让它返回一个函数去处理剩下的参数。
  
  var add = function(x) {
    return function(y) {
      return x + y;
    };
  };
 
  console.log(add(1)(1)); // 输出2
 
  var add1 = add(1);
  console.log(add1(1)); // 输出2
 
  var add10 = add(10);
  console.log(add10(1)); // 输出11
  代码中,我们可以一次性传入2个1作为参数add(1)(1),也可以传入1个参数之后获取add1add10函数,这样使用起来非常灵活。
 
6.apply, call与bind方法
  JavaScript开发者有必要理解applycallbind方法的不同点。它们的共同点是第一个参数都是this,即函数运行时依赖的上下文。三者之中,call方法是最简单的,它等价于指定this值调用函数:
  
  var user = {
    name: "Rahul Mhatre",
    whatIsYourName: function() {
      console.log(this.name);
    }
  };
 
  user.whatIsYourName(); // 输出"Rahul Mhatre",
 
  var user2 = {
    name: "Neha Sampat"
  };
 
  user.whatIsYourName.call(user2); // 输出"Neha Sampat"

   apply方法与call方法类似。两者唯一的不同点在于,apply方法使用数组指定参数,而call方法每个参数单独需要指定:

  • apply(thisArg, [argsArray])
  • call(thisArg, arg1, arg2, …)

  

  var user = {
    greet: "Hello!",
    greetUser: function(userName) {
      console.log(this.greet + " " + userName);
    }
  };
 
  var greet1 = {
    greet: "Hola"
  };
 
  user.greetUser.call(greet1, "Rahul"); // 输出"Hola Rahul"
  user.greetUser.apply(greet1, ["Rahul"]); // 输出"Hola Rahul"

   使用bind方法,可以为函数绑定this值,然后作为一个新的函数返回:

  

  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"
 7.JSONP
  JSONP是JSON的一种使用模式,可以解决主流浏览器的跨域数据访问问题。其原理是根据XmlHttpRequest对象受到同源策略的影响,而<script>标签却不受同源策略影响,可以加载跨域服务器上的脚本,网页可以从其他来源动态产生JSON资料。用JSONP获取的不是JSON数据,而是可以直接运行的JavaScript语句。    
posted @ 2017-10-14 22:49  清源如风  阅读(116)  评论(0编辑  收藏  举报