JS Function对象札记

Function对象

对象中的函数(方法)

当一个函数被保存为对象的一个属性时,我们称它为一个方法,当一个方法被调用时,this被绑定到该对象。

方法可以使用this访问自己所属的对象;

return

 一个函数纵使会返回一个值。如果没有指定返回值,则返回 undefined。

 如果函数调用时在前面加上了 new 前缀,且返回值不是一个对象, 则返回 this(该新对象); 

在jquery的on方法下,得到绑定函数的返回值;

    var returnValue; //通过变量来存储函数的返回值;

    function a(){
        return 123456;
    }

    $(".h1").on("click",function a(){
        returnValue = a();
        alert(returnValue); // 123456
    });

方法调用模式

当一个函数被保存为对象的一个属性时,我们称它为一个方法。当一个方法被调用时, this被绑定到该对象。 如果调用表达式包含一个提取属性的动作(既包含一个 . 点表达式或[subscript]下标表达式),那么它就是被当作一个方法来调用;

函数调用模式

当一个函数并非一个对象的属性时,那么它就是被当作一个函数来调用的:

var sum = add(3, 5); // sum的值为8;

以此模式调用函数时,this 被绑定到全局对象。这是语言设计上的一个错误,对于对象中方法的内部函数,如果我们需要让this指向对象但我们可以通过一个简单的方法:在方法定义一个变量并给它赋值为this,这样内部函数引用方法创建的变量,this的指向就是方法的所属对象了;

 1          var myObject = new Object();
 2             myObject.value = 0;
 3 
 4             function add(num){
 5                 return num * num;
 6             }
 7             myObject.double = function (){
 8                 var here = this; //指向为当前方法所属对象;
 9 
10                 var helper = function (){
11                     var that = this;//指向依旧为window;
12                     that.value = add(50); //window.value = 2500;
13                     here.value = add(100); //myObject.value = 10000;
14                 }
15                 helper();
16          }
17 
18             myObject.double();
19             document.writeln((myObject.value)); //10000;
20             document.writeln((window.value)); //2500;

构造器调用模式

一个函数,如果创建的目的就是希望接合 new 前缀来调用,那么它就被称为构造器函数,按照约定,他们保存在首字母以大写格式命名的变量里。如果调用构造器函数时没有在前面加上 new,可能会发生非常糟糕的事,既没有编译时警告,也没有运行时警告,所以大写约定非常重要!(不推荐使用这种形式的构造函数,下一章有更好的替代方式[js语言精粹30页]);

ps:这个忘记加 new 的事狼哥哥刚刚遇到啦,苦逼死了- -后来看到书上的 new 突然想到了..真让我十分的刻骨铭心!

 1 // 创建一个名为 Quo 的构造函数。 它构造一个带有 statues 属性的对象;
 2             var Quo = function (string) {
 3                 this.statues = string;
 4             };
 5 
 6             // 给 Quo 的所有实例提供一个名为 get_statues 的公共方法;
 7 
 8             Quo.prototype.get_statues = function (){
 9                 return this.statues;
10             };
11 
12             // 构造一个 Quo 实例。
13 
14             var myQuo = new Quo("confused");
15 
16             document.writeln(myQuo.get_statues()); //打印显示 "confused";

通过构造函数创建出来的实例它们的prototype(原型属性对象)都有一个 constructor (构造器)属性,该属性指向 构造函数(类); 

构造函数创建出来的实例可以标识为一种特定的类型,通过 instanceof obj 可以知道 obj对象的对象类型 (私有对象类型跟Object); // 但如果通过工厂模式制造出来的实例对象就无法有个性化的类型标识 (工厂模式出场的实例一般为Object类型);

1     var Person = function (name, age){
2         this.name = name;
3         this.age = age;
4     }
5 
6     var david = new Person("david", 18);
7     var sam = new Person("sam", 18);
8     alert(david.constructor == Person); // true;
9     alert(sam.constructor == Person);  // true

Apply 调用模式

因为JS是一门函数式的面向对象编程语言,所以函数可以拥有方法。

apply 方法让我们构建一个参数数组传递给调用函数,它也允许我们选择 this 的值。 apply 方法接收两个参数, 第 1 个是要绑定给 this 的值,第 2 个就是一个参数数组.

 1         function add(num1, num2){
 2                 return num1 + num2;
 3             }
 4 
 5             // 构造一个包含两个数字的数组,并将他们相加;
 6             var array = [3, 4];
 7             var sum = add.apply(this, array);  // this默认指向window;
 8             alert(sum);  // 7


arguments 参数

当函数被调用时,会得到一个“免费“配送的参数, 那就是 arguments 数组,函数可以通过此参数访问所有它被调用时传递给它的参数列表。

因为语言的一个设计错误, arguments 并不是一个真正的数组, 它只是一个 ”类似数组 (array-like)“ 的对象。 arguments 拥有一个 length 属性,但它没有任何数组的方法。我们将会在本章结尾看到这个设计错误导致的后果 (语言精粹p30);

bind()   方法   

将函数绑定为对象的方法,返回新函数  ECMASCRIPT 5的方法  IE678无法使用

    function f(b, c){
        console.log(this.a + c);
    }

    var o = { a: 10};
    var g = f.bind(o, 2);  // 绑定 f函数作为 o的方法   并且为f传入一个固定参数

    g();    //NaN  ---> f.bind(o, 2, null)
    g(10);  //20   ---> f.bind(o, 2, 10)

IE678的模拟 bind();

    if (!function() {}.bind) {
        Function.prototype.bind = function(context) {
            var self = this
                    , args = Array.prototype.slice.call(arguments); // arguments to Array;

            return function() {
                return self.apply(context, args.slice(1));   // self.apply(arguments[0], arguments.slice(1));
            }
        };
    }
原文地址:https://www.cnblogs.com/juhualang/p/3747093.html