Question

这是一个基本程序，我不明白为什么这不起作用：

一个对象类，houseObject.js：

var string;

    function createSentence(paragraph){
        this.string = paragraph;
    }

    function getString(){

        return string;  
    }

运行程序：

<!DOCTYPE html>
<html>
<head>

<script type = "text/javascript" src="houseObject.js"></script>
<script>

   var temp = new createSentence("hello world");
   var string = temp.getString();
    var para=document.createElement("p");
    var node=document.createTextNode(string);
    para.appendChild(node);


</script>

</head>


<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
    var element=document.getElementById("div1");
    element.appendChild(para);
</script>
</body>
</html>

我的第二个问题是：为什么我不能放

    var element=document.getElementById("div1");
    element.appendChild(para);

在html的head部分内。是因为html是一个脚本程序，它还没有阅读正文部分吗？

提前致谢

Answer 1

我担心你还没有完全理解Javascript中的对象是如何工作的。 this.name与您似乎全局定义的name不同。在“Introduction To Object Oriented Javascript”中阅读有关Javascript中对象的更多信息。

Answer 2

您可以构建一个构造函数来获取对象：

var Sentence = function (text) {
    this.text = text;
};

现在，如果你这样做

var obj = new Sentence("Hello World");

您有一个obj instanceof Sentence，您可以访问该属性，如

console.log(obj.text); // prints Hello World

将此“附加”到DOM元素是另一个巨大的答案。请参阅this question为什么直接在DOMElement上引用对象是危险的。也许你应该从jQuery.data开始，或者你创建一个数组或另一个对象来存储id / object元组：

var list = [ obj0, obj1 ];

var keyValueStore = { "key0": obj0, "key1" : obj1 };

进一步扩展构造函数及其对象实例：

var Sentence = function (text) {
    this.para = document.createElement("p");
    this.setText(text);
};

Sentence.prototype.setText = function (text) {
    if (this.node) {
        this.para.removeChild(this.node);
    }
    this.node = document.createTextNode(text);
    this.para.appendChild(this.node);
};

Sentence.prototype.getText = function () {
    if (this.node) {
        if (!this.node.textContent) {
            // typical IE hack
            return this.node.innerText;
        }
        return this.node.textContent;
    }
};

用法：

window.onload = function () {

    var sentence0 = new Sentence("Hello World");

    document.body.appendChild(sentence0.para);

    setTimeout(function () {
        sentence0.setText("I'm Edward!");
    }, 5000);

};

小提琴：http://jsfiddle.net/tfets/（jsFiddle会自动换行window.load处理程序）。

Answer 3

你是对的。 HTML文档按顺序读取，JS代码在找到时执行。 <head>内的脚本无法访问<body>内的节点，因为它们尚未被读取。

Answer 4

好的，如果您正在使用对象，请使用Prototype，如下所示：

function createSentence(paragraph){
    this.paragraph = paragraph;
}

createSentence.prototype.getString = function(){
    alert(this.paragraph);
    //Or return this.paragraph
}

var string_1 = new createSentence('my sentence');
var string_2 = new createSentence('another sentence');

string_1.getString();
//Will return 'my sentence'

string_2.getString();
//Will return 'another sentence'

基本的Javascript和html对象执行

4 个答案: