Question

var ajaxFileUploader = function(formId){
    this.formId = formId;

    console.log(this.formId); //myForm
    return console.log(
        document.querySelector(this.formId)// null
    );
}

var foo = new ajaxFileUploader('#myFrom');

我尝试创建一个对象并将参数传递给它。

我在console.log这个属性

时工作正常

但是当我尝试使用querySelector时，它返回null

任何人都知道它为什么会返回null？

Answer 1

将整个代码括在window.onload=function(){}中。你可能已经把脚本放在头部，但是元素在body处，这就是为什么元素加载迟到而脚本返回null。如果您使用window.onload=function(){}，则脚本将在整个文档加载后运行

＆＃13;

window.onload=function(){
var ajaxFileUploader = function(formId){
    this.formId = formId;

    console.log(this.formId); //myForm
    return console.log(document.querySelector(this.formId));
}

var foo = new ajaxFileUploader('#myFrom');
  }

＆＃13;

<form id="myFrom" action="demo_form.asp" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

＆＃13;

Answer 2

关于＆＃39;这个＆＃39;

的上下文存在问题

解决方案1：

var ajaxFileUploader = function(formId){
    this.formId = formId;
    console.log(this.formId); 
    var logger = console.log.bind(this);
   return logger(
       document.querySelector(this.formId)
   );
}

var foo = new ajaxFileUploader('#myFrom');

解决方案2：

另一个解决方案是你可以使用＆＃34; formId＆＃34;这将通过函数的词汇上下文得到。

将参数传递给对象并将其用于querySelector但返回null

2 个答案: