JS原型函数相关基础知识

函数对象和普通对象

 //普通对象
 var oo1 = {}, oo2 = new Object(), oo3 = [];
 console.log(typeof oo1 + ',' + typeof oo2 + ',' + typeof oo3); //object,object,object

 //函数对象
 function ff1() {}
 var ff2 = function () {}
 var ff3 = new Function();
 console.log(typeof ff1 + ',' + typeof ff2 + ',' + typeof ff3); //function,function,function
 console.log(typeof Object + ',' + typeof Function + ',' + typeof Array + ',' + typeof Date); //function,function,function,function

如上typeof返回值为object的认为普通对象,typeof返回值为function的认为函数对象,其主要差别如下:

  1. 每一个函数对象都有一个显示的prototype属性,它代表了对象的原型(Function.prototype函数对象是个例外,没有prototype属性)。每个对象都有一个名为proto的内部隐藏属性,指向于它所对应的原型对象(chrome、firefox中名称为proto,并且可以被访问到)。原型链正是基于proto才得以形成(函数对象也有proto属性)。
  2. 函数对象可以作为对象构造器,通过new操作符来返回一个对象。

即函数对象是特殊的对象,它拥有prototype属性,可作为对象构造器。JS提供的对象如Function、Object等都是函数对象。(注意Function是特殊的函数对象,new Fucntion()返回的是一个函数对象,而其它函数对象如Object等通过new操作符——new Object()返回的是一个普通对象)。

prototype、proto和constructor

prototype是函数对象的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象。它是显示修改对象的原型的属性。
proto是一个对象拥有的内置属性(请注意:prototype是函数的内置属性,proto是对象的内置属性),是JS内部使用寻找原型链的属性。
每个函数对象都有名为“prototype”的属性(上面提到过Function.prototype函数对象是个例外,没有prototype属性),用于引用原型对象。此原型对象又有名为“constructor”的属性,它反过来引用函数本身。这是一种循环引用(F4.prototype.constructor===F4)。

 var F4 = function () {
     this.a = 'a';
     return this.a;
 }
 var o4 = new F4();
 console.log(o4.a); //'a'
 console.log(F4.prototype === o4.__proto__); //true
 console.log(F4.prototype === F4.__proto__); //false
 console.log(F4.prototype === Function.prototype); //false
 console.log(F4.__proto__ === Function.prototype); //true
 console.log(o4.constructor === F4); //true
 console.log(o4.constructor === F4.prototype); //false
 console.log(o4.constructor === F4.prototype.constructor); //true
 console.log(F4.constructor === Function); //true
 console.log(F4.constructor === Function.prototype.constructor); //true
 console.log(Function === Function.prototype.constructor); //true
 console.log(F4 === F4.prototype.constructor); //true
 console.log(Object.constructor === Function); //true

 console.log(Function.prototype === Function.__proto__); //true
 console.log(typeof Object + ',' + typeof Object.prototype + ',' + Object.prototype.__proto__ + ',' + Object.prototype.prototype); //function,object,null,undefined
 console.log(typeof Function + ',' + typeof Function.prototype + ',' + Function.prototype.__proto__ + ',' + Function.prototype.prototype); //function,function,[Object],undefined
 console.log(typeof F4 + ',' + typeof F4.prototype + ',' + F4.prototype.__proto__ + ',' + F4.prototype.prototype); //function,function,[Object],undefined
 console.log(typeof o4 + ',' + typeof o4.__proto__ + ',' + o4.__proto__.__proto__ + ',' + o4.__proto__.prototype); //object,object,[Object],undefined


上图中o为普通对象,F为普通函数对象,椭圆表示函数对象,矩形表示函数对象,从中可以看出:

  1. 所有对象,包括函数对象的原型链最终都指向了Object.prototype,而Object.prototype.proto===null,原型链至此结束。
  2. Function.prototype是一个函数对象,但是Function.prototype却没有prototype属性,即Function.prototype.prototype===undefined,所以Function.prototype函数对象是一个特例,没有prototype属性。除Function.prototype外,其它函数对象如Object.prototype
  3. Object.constructor===Function;说明Object是Function函数构造出来的。

    函数对象的特殊属性

    arguments

    arguments其主要用途是用来保存函数参数。

      arguments.length//值来判断实参的个数
      arguments[0]//表示传递的第一个元素
      arguments[1]//表示传递的第二个元素
    

    arguments(不是Array的实例)对象还有一个属性:callee,指向拥有arguments对象的函数,在编写递归函数时常用。

    function factorial(num){
    if(num<=1){
       return 1;
    }
    else{
       //return num*factorial(num-1); 
       //一个实例化的函数对象可以拥有很多个名字,不应限定函数名必须是factorial
       return num*arguments.callee(num-1);
    }
    }
    

    length

    length表示每个函数准备接收的命名参数的个数,即形参的个数,区别于内部对象arguments是实参的个数。

    function sum(num1,num2,num3)
    {
        alert(arguments.callee.length);//方法2:内部对象调用
    }
    sum(1,2)
    alert(sum.length);//方法1:函数调用
    

    this对象

    this指向调用当前函数的对象,当在网页全局作用域中调用时,this对象引用的就是window。

    function hello(){
      console.log('hello '+this.val);
    }
    
    var a={"val":"a","hello":hello},b={"val":"b","hello":hello};
    hello();//hello undefined
    a.hello();//hello a
    b.hello();//hello b
    

    call,apply, bind

    apply方法有两个参数,1个是在其中运行函数的作用域(即要调用函数的对象),另一个是参数数组。
    call方法与apply方法的作用一样,但是接收参数的方式不同,其参数必须逐个例出来。
    bind方法新创建一个函数对象,这个函数对象的this值绑定参数传入的对象。
    call 和 apply差别:参数的样子不一样,另一个就是性能不一样。(apply的性能要差很多,可到 JSPerf 上去跑跑看看)
    注意,在bind后,call、apply方法也不能改变this指针,如下面的示例

    hello.call(a,'pa');//hello a pa
    hello.apply(a,['pa']);//hello a pa
    hello.call(b,'pb');//hello b pb
    hello.apply(b,['pb']);//hello b pb
    
    var h = hello.bind(a);
    hello();//hello undefined undefined
    h();//hello a undefined
    h.call(b,'pb');//hello a pb
    h.apply(b,['pb']);//hello a pb
    

    new关键字

    var Base=function(){}
    var obj=new Base();
    //上面中new操作符干了三件事情
    //1.初始化一个空对象obj 
    var obj  = {}; 
    //2.将这个空对象的__proto__成员指向了Base函数对象prototype成员对象
    obj.__proto__ = Base.prototype;
    //3.将Base函数对象的this指针替换成obj,然后再调用Base函数,初始化obj
    Base.call(obj);
    

    但要注意但函数本身返回值为对象时new操作符不起作用。

    如果函数返回值为常规意义上的值类型(Number、String、Boolean)时,new函数将会返回一个该函数的实例对象,而如果函数返回一个引用类型(Object、Array、Function),则new函数与直接调用函数产生的结果等同。

var F3 = function () {
     this.a = 'a';
     var o = {
         'name' : 'name'
     };
     return o;
 }
 var o3 = new F3();
 console.log(o3.a); //undefined
 console.log(o3.__proto__ === F3.prototype); //false
 console.log(F3.prototype == F3.__proto__); //false
 console.log(F3.__proto__ == Function.prototype); //true
 console.log(o3.constructor === F3); //false;

 var F4 = function () {
     this.a = 'a';
     return this.a;
 }
 var o4 = new F4();
 console.log(o4.a); //'a'
 console.log(F4.prototype === o4.__proto__); //true
 console.log(F4.prototype === F4.__proto__); //false
 console.log(F4.prototype === Function.prototype); //false
 console.log(F4.__proto__ === Function.prototype); //true
 console.log(o4.constructor === F4); //true
 console.log(o4.constructor === F4.prototype); //false
 console.log(o4.constructor === F4.prototype.constructor); //true

JS面向对象编程时类函数定义方式

 var F2 = function () {
    var inner='inner';
     this.o1 = 'o1';
     this.f1 = function () {
         console.log('f1 ' + this.o1+' '+ inner);
     }
     function f2() {
         console.log('f2 ' + this.o1+' '+ inner);
     }
 }

 F2.prototype.f3 = function () {
     //console.log('f3' + this.o1+' '+ inner);失败,找不到inner
     console.log('f3' + this.o1);
 }

 var o2 = new F2();
 o2.f1();
 //o2.f2();失败,找不到f2
 o2.f3();

js面向对象编程时类定义函数用prototype方式和this方式区别:this方式定义的函数如f1可以访问构造函数内部的变量如上例inner,prototype方式定义的函数f3则不能访问内部变量; 但如果所有函数都采用this方式定义则每次实例化都要执行,浪费内存,也不合理。
this方式定义方法叫做特权方法,主要是为了访问内部的私有字段,这样就可以控制对某些字段的访问。prototype方式定义的函数能访问这些特权方法,进而间接访问私有字段。

因此,如果要直接访问私有字段,应该使用特权方法,也就是this定义的方法,应该定义在构造函数内部。相反,如果不需要直接访问私有字段,应该使用prototype定义的方法,定义在构造函数外部。

参考:
Js中Prototype、proto、Constructor、Object、Function关系介绍
Js New一个函数和直接调用的区别





posted on   时间朋友  阅读(1427)  评论(0编辑  收藏  举报

编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
历史上的今天:
2014-10-13 第42周一
2013-10-13 2013年第41周日不放弃
2012-10-13 第41周星期六

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示