对于.replaceWith() .call(this) 在实际效果中的不解。

Question

从网上下载的一个jquery文字特效代码，有两处不懂的，请大神教一下。效果显示jQuery基于CSS3文字动画特效html文件中有<p class="ex1">TEXTYLE</p> <p class="ex2">FLIP</p>js文件中 (function($){    $.fn.textyleF = function(options){    var target = this;    var targetTxt = target.contents();    var defaults = {      duration : 1000,      delay : 150,      easing : 'ease',      callback : null    };    var setting = $.extend(defaults, options);    targetTxt.each(function(){      var texts = $(this);      if(this.nodeType === 3){        mkspn(texts);      }    });    function mkspn(texts){      texts.replaceWith(texts.text().replace(/(\S)/g,'<span>$1</span>'));      console.log("texts="+texts);    }    return this.each(function(i){      var child = target.children('span');      target.css('opacity',1);      child.each(function(i){        $(this).delay(setting.delay*i)          .queue(function(next) {          $(this).css({            display : 'inline-block',            transform : 'rotateY(0deg) rotateX(0deg)',            opacity : 1,            transitionDuration : setting.duration + 'ms',            transitionTimingFunction : setting.easing          })          next();        });        if(typeof setting.callback === 'function'){          $(this).on('transitionend', function() {                       setting.callback.call(this);                      });        } else {          console.error('Textyle.js: `setting.callback` must be a function.');        }      });    });  }; }( jQuery )); $(window).on('load',function(){   $('.ex1').textyleF();   $('.ex2').textyleF({       duration : 2000,       delay : 200,       easing : 'cubic-bezier(0.77, 0, 0.175, 1)',       callback : function(){         $(this).css({           color : '#fff',           transition : '1s',         });         $('.desc').css('opacity',1);       }     });   });问题1： texts.replaceWith(texts.text().replace(/(\S)/g,'<span>$1</span>'));    外层的replaceWith()的作用是把括号里的内容替换texts的文本对么？    但是控制台打印texts，不是<span>T</span>这样的，是Object [ #text ]?问题2：setting.callback.call(this);   1、 我对call和this的用法一直没搞懂，这里要实现的效果应该是调用$('.ex2')..textyleF()里设置的callback吧？    2、那.call(this);在这里作用是什么？前后的this都是HTMLSpanElement。    3、call()可以改变this的指向？但是在这之前打印this是 。<span style="display: inline-block; t…ier(0.77, 0, 0.175, 1);"> <span style="display: inline-block; t…or: rgb(255, 255, 255);"> <span style="display: inline-block; t…ier(0.77, 0, 0.175, 1);"> <span style="display: inline-block; t…or: rgb(255, 255, 255);"> <span style="display: inline-block; t…ier(0.77, 0, 0.175, 1);"> <span style="display: inline-block; t…or: rgb(255, 255, 255);"> <span style="display: inline-block; t…ier(0.77, 0, 0.175, 1);"> <span style="display: inline-block; t…or: rgb(255, 255, 255);"> <span style="display: inline-block; t…or: rgb(255, 255, 255);"> <span style="display: inline-block; t…or: rgb(255, 255, 255);"> <span style="display: inline-block; t…or: rgb(255, 255, 255);"> <span style="display: inline-block; t…or: rgb(255, 255, 255);"> 在此句之后打印this，就没有<span style="display: inline-block; t…ier(0.77, 0, 0.175, 1);">所以调用了.call(this)的作用是什么？this指向变了？问题3：①window.onload == $(window).on('load') ?            ② $(function($){});== $(document).ready()  ?            ③ ②在dom树加载完就执行，所以是在①之前执行            ④ (function($){...})(jquery);是自执行匿名函数？也是在dom加载完运行，那和$(function($){});有区别？