js中call(),apply(),以及prototype的含义

Posted 2020-10-10 ServerSocket

最近段时间主要学习前端去了，然而所遇到的一些问题我觉得有必要去深究一下

prototype:

 1 js中有三种表达方法

类方法，属性方法，原型方法

function People(name) {
    this.name=name;
    //对象方法
    this.Introduce=function(){
        console.log("My name is "+this.name);
    }
}
//类方法
People.Run=function(){
    console.log("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
    console.log("我的名字是"+this.name);
}
//测试
var p1=new People("xx");
p1.Introduce(); //   My name is xx
People.Run();  //I can run
p1.IntroduceChinese(); 我的名字是xx

其实从上面可以看出prototype,实际上向people中添加了一个方法，而这也应官方的解释“prototype 属性使您有能力向对象添加属性和方法"

2 实现继承

 

function baseClass(){
    this.showMessage = function () {
        console.log(‘baseClass:‘,‘woc this is bad boy‘)
    }
}

// function extendClass(){}

function extendClass(){
    this.showMessage = function () {
        console.log(‘extendClass:‘, ‘woc this is good body‘)
    }
}

function extendClass1(){}


 extendClass.prototype = new baseClass()
extendClass1.prototype = new baseClass()

var eC = new extendClass() //extendClass: woc this is good body

var eC1 = new extendClass1() //baseClass: woc this is bad boy

eC.showMessage()
eC1.showMessage()

 从上面的案例可以看出如果extendClass()的showMessage存在的情况就会指向自己，如果不存在就会指向其”父类“

 

call() 和 appyl()

1 每个function中有一个prototype, call(), apply()

call() apply() 我简单的理解为改变你当前对象的指向，这可能有点抽象，看下代码

function method1(arg1, arg2) {
    return arg1+arg2
}

function method2(arg1, arg2) {
    return arg1-arg2
}

var result1 = method2.apply(method1,[3,2]);

var result2 = method1.call(method2,3,3)

console.log(result1); //1
console.log(result2); //6

 

 从上面的实例可以看出两个function的指向发上了改变

call() apply(): 这个是当前的this指针指向调用你的那个function（有点类似copy的意思）

而两者的区别在于apply() 在参数上只有两个参数（当前方法，数组），

而call()的参数则是单个单个的形式

2 实现继承

function father(word) {
    this.word = word
    this.showName1 = function(){
        console.log(‘Father say:‘, this.word)
    }
}

function mother(word) {
    this.word = word
    this.showName2 = function () {
        console.log(‘Mother say:‘, this.word)
    }
}

function child(word) {
    // father.apply(this,[word])
    father.call(this, word)
    mother.call(this, word)
}

var c = new child(‘boys‘);

c.showName1(); // Father say: boys
c.showName2(); // Mother say: boys

 

3 好的案例

（1）活用

var result = Math.max(7.25,7.30)

var array = [1,3,4,5,6,0,32.3,3.3]

var result1 = Math.max.apply(null,array);
var result2 = Math.min.apply(null,array);
console.log(result)  // 7.3
console.log(result1) // 32.3
console.log(result2)  // 0

 在js Math.max()中的参数是没有传数组的形式的，而这里通过apply()巧妙地实现了这种转变，首先我们并不需要那个对象去指向Math,所以放了一个null做为参数，然后将arary数组传入其中

（2） 理解

function baseClass() {
    this.showMsg = function()
    {
        console.log("baseClass::showMsg");
    }

    this.baseShowMsg = function()
    {
        console.log("baseClass::baseShowMsg");
    }
}
baseClass.showMsg = function()
{
    console.log("baseClass::showMsg static");
}

function extendClass()
{
    this.showMsg =function ()
    {
        console.log("extendClass::showMsg");
    }
}
extendClass.showMsg = function()
{
    console.log("extendClass::showMsg static")
}

extendClass.prototype = new baseClass();
var instance = new extendClass();

instance.showMsg(); //显示extendClass::showMsg
instance.baseShowMsg(); //显示baseClass::baseShowMsg
instance.showMsg(); //显示extendClass::showMsg

baseClass.showMsg.call(instance);//显示baseClass::showMsg static

var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg

View Code