JS函数进阶

目录

函数的调用方式

改变函数内部this指向

真数组转伪数组

伪数组转真数组

函数属性

length:

prototype

new.target

---

函数的调用方式

1.普通函数

    //1.普通函数
    function fn(){
      console.log('今天天气真好'+this)
    }
    //fn();  
    //fn.call()

this指向window

2.对象方法

    var o={
      sayHi:function(){
        console.log('今天天气真好'+ this)
      }
    }
    o.sayHi();

this指向函数的调用者，这里this指向对象o

3.构造函数

  function Car(){}
    var bm=new Car();

this指向实例，这里的this指bm

Car.prototype.run=funcion(){}原型对象的this也是指向实例

4.绑定事件函数

 btn.onclick =function(){} //点击了按钮就可以调用这个函数

this指向的是函数的调用者，这里指 btn这个按钮对象

5.定时器函数

​setInterval(function(){},1000)  //这个函数是定时器自动1秒钟调用一次
​

定时器函数this指向window

6.立即执行函数

(function(){
      console.log(今天天气真好);
    })();
    //立即执行函数自动调用

this指向window

改变函数内部this指向

1.call()

call()可以调用函数；

call()可以改变函数内的this执行

  <script>
    function fn(x,y) {
      console.log(this)
      console.log(x+y)
    }
    var o = {
      name:'Betty'
    }
    //1.调用函数
    // fn.call();
    //2.call()可以改变这个函数的this指向
    fn.call(o,1,2)
  </script>

call()的主要作用可以实现继承

  <script>
    function Father (uname,age,sex){
      this.uname =uname;
      this.age =age;
      this.sex =sex;
    }
    function Son(uname,age,sex){
      Father.call(this,uname,age,sex)
    }
    var son = new Son('大头儿子',5,'男')
    console.log(son)
  </script>

2.apply()

fun.apply(thisArg,[argsArray])

thisArg:在fun函数运行时指向的this值

asgsArray:传递的值,必须包含在数组里面

返回值就是函数的返回值，因为它就是调用函数

  <script>
    var o = {
      name:'Betty'
    }
    function fn(arr){
      console.log(this);
      console.log(arr);
    }
    fn.apply(o,['cwq']);
  </script>

apply()调用一个函数，可以改变函数的this指向

apply的主要应用，利用apply借助于数学内置对象求最大值

     var arr=[1,9,55,6];
    var max=Math.max.apply(Math,arr);
    console.log(max);  //55

当apply(null,arr) 表示不改变this指向

3.bind()

bind()不会调用函数，但是能改变函数内this指向

fun.bind(thisArg,arg1,arg2,...)

thisArg:在fun函数运行时指向的this值

arg1,arg2:传递的其他参数

返回有指定的this值和初始化参数改造的原函数拷贝

  <script>
    var o = {
      name:'Betty'
    };
    function fn(a,b){
      console.log(this);
      console.log(a+b);
    }
    var f=fn.bind(o,1,2);
    f();
    //1.不会调用原来的函数 可以改变原来函数内部的this指向
    //2.返回的是原函数改变this之后产生的新函数
  </script>

真数组转伪数组

  <script>
    var a = [1, 2, 3, 5]
    var obj = {}
    a.push.apply(obj,a)
    console.log(obj)
  </script>

伪数组转真数组

var obj = {0:"lnj",1:"33",length:2}
    var a = [].slice.call(obj);
    console.log(a)

函数属性

每个函数都有两个属性：length和prototype。其中，length属性保存函数定义的命名参数的个数，

length:

function sayName(name) { 
 console.log(name); 
} 
function sum(num1, num2) { 
 return num1 + num2; 
} 
function sayHi() { 
 console.log("hi"); 
} 
console.log(sayName.length); // 1 
console.log(sum.length); // 2 
console.log(sayHi.length); // 0

prototype

保存引用类型所有实例方法的地方，这意味着toString()、valueOf()等方法实际上都保存在prototype上，进而由所有实例共享。prototype属性是不可枚举的，因此使用for-in循环不会返回这个属性。

new.target

检测函数是否使用new关键字调用的new.target属性。如果函数是正常调用的，则new.target的值是undefined；如果是使用new关键字调用的，则new.target将引用被调用的构造函数。

function King() { 
 if (!new.target) { 
 throw 'King must be instantiated using "new"' 
 } 
 console.log('King instantiated using "new"'); 
} 
new King(); // King instantiated using "new" 
King(); // Error: King must be instantiated using "new"