JavaScript中call与apply的用法及继承实现解析

作者:纸飞机时间:2026-10-29 08:05:34浏览:292

本文详细解析JavaScript中call和apply两个核心方法的用法,重点演示如何利用call方法改变函数执行上下文来实现类的继承。通过矩形面积计算及学生对象属性绑定的具体代码示例,清晰展示参数传递方式与this指向的变化机制,帮助开发者深入理解函数调用模式。

call与apply的基本用法及继承实现

call和apply是JavaScript中用于改变函数执行上下文(this指向)的重要方法,本文还将展示如何利用call方法实现JavaScript类的继承机制。

代码执行上下文切换示例


/*
 * 矩形
 */
function Rectangle(len,width) {
  this.len = len;
  this.width = width;
 
}
/*
 * 乘以
 */
function multiply(a,b) {
  return a * b;
}
// 矩形实例
var rectangle = new Rectangle(15, 30);
//求矩形面积
var proportion = multiply.call(rectangle,rectangle.len, rectangle.width);
// 等价于call
//var proportion = multiply.apply(rectangle,[rectangle.len, rectangle.width]);
 
document.write("矩形的面积是:"+proportion);
document.write("<br/>");
 
document.write("/***********************分割线********************************/<br/>");
 
// 实现继承
function Persion(name) {
  this.name = name;
  this.sayHello = function () {
    return "hello,"+this.name;
  }
}
 
function Student(name,sex,school) {
  Persion.call(this,name);
  this.sex = sex;
  this.school = school;
 
  this.mySex = function () {
    return this.sex;
  }
  this.mySchool = function () {
    return this.school;
  }
}
 
var stu = new Student('fengjx','男','广西机电职业技术学院')
 
document.write("stu sayHello:"+stu.sayHello());
document.write("<br/>");
document.write("stu sex is:"+stu.mySex());
document.write("<br/>");
document.write("stu school is :"+stu.mySchool());
document.write("<br/>");

运行效果演示

相关运行效果演示如下:

call与apply的基本用法及继承实现 

总结

上述内容涵盖了本文的核心知识点,希望这些示例能帮助您更好地理解相关技术。

作者最新文章