js中的call

JavaScript012

js中的call,第1张

java中对象包含属性和方法, 方法即函数, 只有对象可以调用方法

但是js中一切皆对象, 函数是对象, 函数也可以调用方法

Function.prototype.call

Function.prototype.apply

Function.prototype.bind

Function.prototype.toString

为什么js语言会在function原型上挂上这四个函数?

因为好处太多了, 现在我就说一说call的应用

再深入思考一下, call语法是基于什么形成的呢 ?

了解底层语法有助于我们理解高级的语法

因为在底层的语法眼中, 高级语法只不过是工具, 根本不算语法, 不过是由我定义构建处理来的

理解call函数, 核心必要知识

哈哈哈, v8内部的不知道, 反正js基于现有语法就有这个能力 (还有解法, 基于 proto ,原型链的方式, var temp = Object.create(null)), 利用干净的地方, 防止覆盖原对象的函数

显然, 我们自己的上面的mycall还要很多问题

这里我们就实现了自己的call, 以后看见call就知道都不过是些雕虫小技了(当然真实的实现方式肯定需要考虑更多因素和性能, 而且在v8更大的环境下, 可能还不止一种实现方式,保持谦虚)

javascript 中call用处不少,用一句话概括就是动态改变this.比如说:

function cat(){

}

//做一个原型扩展

cat.prototype={

food:"fish",

say: function(){

alert("I love "+this.food)

}

}

var blackCat = new cat

blackCat.say()

//当我需要一条黑狗也说它喜欢什么时:

blackDog = {food:"bone"};

//我们不想对它重新定义say方法,那么我们可以通过call用blackCat的say方法:

blackCat.say.call(blackDog)

//例子来源于知乎

call用来改变this的,改变的方式就一下几种:

1,上例子中属于继承式

2,替换式

function NameShowing(){  

    this.showName = function(){  

        document.write(this.name)  

    }  

}  

  

function Person(name){  

    this.name = null  

    this.Init = function(name){    

        this.name = name    

    }    

    this.Init(name)    

}  

  

var nameShowing = new NameShowing()  

var jeremy = new Person("Jeremy")  

  

//替换this指向 jeremy

nameShowing.showName.call(jeremy)

3,实例继承

function NameShowing(){  

    this.showName = function(){  

        document.write(this.name)  

    }  

}  

  

function Person(name){  

    this.name = null  

    this.Init = function(name){    

        this.name = name    

    }    

    this.Init(name)    

}  

  

var jeremy = new Person("Jeremy")   

NameShowing.call(jeremy)  

jeremy.showName()

2和3一个是针对方法,一个是对象,本质一样。

4,带有构造函数的参数

function Person(name, age){  

    this.name = null  

    this.age = null  

    this.showPersonInfo = function(){  

        document.write("Name: " + this.name + "<br>")  

        document.write("Age: " + this.age + "<br>")  

    }  

    this.Init = function(){  

        this.name = name  

        this.age = age  

    }  

    this.Init()  

}  

  

var jeremy = new Object()  

Person.call(jeremy, "Jeremy", 20)  

jeremy.showPersonInfo()

参考资料:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call