wns9778.com_威尼斯wns.9778官网

热门关键词: wns9778.com,威尼斯wns.9778官网
wns9778.com > 计算机教程 > 关于javascript中call()和apply()方法的总结wns9778.com:

原标题:关于javascript中call()和apply()方法的总结wns9778.com:

浏览次数:182 时间:2019-05-10

前段时间在使用javascript的过程中遇到了继承的问题,自己顺便就对call()和apply()方法进行了了解。

如何理解 js 中的 call 和 apply?

两个方法的共同之处:这两个方法作用相同,都用来改变当前函数调用的对象,即改变this的指向。

背景介绍

两个方法的不同之处:不同之处就是两种方法的传参方式不同,apply接受的是数组参数,call接受的是连续参数。

call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的

换句话说,就是为了改变函数体内部 this 的指向。因为 JavaScript 的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。

apply()方法的定义:

知识剖析

Function.apply(obj,args);

apply

方法能劫持另外一个对象的方法,继承另外一个对象的属性. Function.apply(obj,args)方法能接收两个参数

obj:这个对象将代替 Function 类里 this 对象

args:这个是数组,它将作为参数传给 Function(args-->arguments)

obj:这个对象会代替Function类里边所指向的this对象。

call

和 apply 的意思一样,只不过是参数列表不一样

Function.call(obj,[param1[,param2[,…[,paramN] ] ] ] )

obj:这个对象将代替 Function 类里 this 对象

params:这个是一个参数列表

args:这是一个数组,作为参数传递给Function。

常见问题

如何使用 call 和 apply?

示例:

解决方案

call 和 apply 的作用基本类似,都是去执行 function 并将这个 function 的 context 替换成第一个参数带入。两者的不同是 call 必须将 function 的参数一一带入,接受的是连续参数而 apply 接受的是数组参数 只要在第二个参数带入一个数列。

//j  k  形參
function add(j, k) {
  return j   k;
}
function sub(j, k) {
  return j - k;
}
// 5 3  實參
add(5, 3); //8
add.call(sub, 5, 3); //8
add.apply(sub, [5, 3]); //8
sub(5, 3); //2
sub.call(add, 5, 3); //2
sub.apply(add, [5, 3]); //2
//通过call和apply实现对象继承。

var Parent = function() {
  this.name = "yjc";
  this.age = 22;
};
var child = {};
console.log(child); //Object {} ,空对象
Parent.call(child);
console.log(child); //Object {name: "yjc", age: 22}

//call方法1
window.color = "red";
document.color = "yellow";
var s1 = { color: "blue" };
function changeColor() {
  console.log(this.color);
}

//2
changeColor.call(); //red (默认传递参数)
changeColor.call(window); //red
changeColor.call(document); //yellow
changeColor.call(this); //red
changeColor.call(s1); //blue

var Pet = {
  words: "...",
  speak: function(say) {
    console.log(say   ""   this.words);
  }
};
Pet.speak("Speak"); // 结果:Speak...
var Dog = {
  words: "Wang"
};
//将this的指向改变成了Dog
Pet.speak.call(Dog, "Speak"); //结果:SpeakWang

//apply方法1
window.number = "one";
document.number = "two";
var s1 = { number: "three" };
function changeColor() {
  console.log(this.number);
}
changeColor.apply(); //one (默认传参)
changeColor.apply(window); //one
changeColor.apply(document); //two
changeColor.apply(this); //one
changeColor.apply(s1); //three

//方法2
function Pet(words) {
  this.words = words;
  this.speak = function() {
    console.log(this.words);
  };
}

function Dog(words) {
  //Pet.call(this, words); //结果:Wang
  Pet.apply(this, arguments); //结果:Wang
}

var dog = new Dog("Wang");
dog.speak();
<script>

  function Intro(name,age){
    this.name=name;
    this.age=age;
    this.speak=function(){
      console.log('My name is ' this.name '.' ' I am ' this.age ' years old.');
    }
  }

  function IntroInh(name,age){
    Intro.apply(this,arguments);
  }
  var lm=new IntroInh('LiMing',20);
  lm.speak();

</script>

实例

// call方法可以用来代替另一个对象调用一个方法,
// call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象,
// 如果没有提供thisObj参数,那么Global对象被用于thisObj.
//1:

function add(c, d) {
  return this.a   this.b   c   d;
}

var s = { a: 1, b: 2 };

console.log(add.call(s, 3, 4)); // 1 2 3 4 = 10
console.log(add.apply(s, [5, 6])); // 1 2 5 6 = 14

//2:

window.firstName = "Cynthia";
window.lastName = "_xie";

var myObject = { firstName: "my", lastName: "Object" };

function getName() {
  console.log(this.firstName   this.lastName);
}

function getMessage(sex, age) {
  console.log(
    this.firstName   this.lastName   " 性别: "   sex   " age: "   age
  );
}

getName.call(window); // Cynthia_xie
getName.call(myObject); // myObject
getName.apply(window); // Cynthia_xie
getName.apply(myObject); // myObject

getMessage.call(window, "女", 21); //Cynthia_xie 性别: 女age: 21
getMessage.apply(window, ["女", 21]); // Cynthia_xie 性别: 女age: 21
getMessage.call(myObject, "未知", 22); //myObject 性别: 未知age: 22
getMessage.apply(myObject, ["未知", 22]); // myObject 性别: 未知 age: 22

 

拓展

本文由wns9778.com发布于计算机教程,转载请注明出处:关于javascript中call()和apply()方法的总结wns9778.com:

关键词: wns9778.com

上一篇:C# Soap调WebService

下一篇:没有了