对于.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($){});有区别？