javascript - 为什么当我已经设置对象属性时它们是未定义的

Question

function detail(){
  this.html = this.name;
}

var detail1 = new detail();
detail1.name = 'xyz';
console.log(detail1.html);

上面的代码undefined作为输出给出。但我已经将名称设置为“xyz”；我是面向对象的 JavaScript新手。请帮忙。

Answer 1

那是因为name当undefined您html通过复制来初始化属性时。

一个解决方案是在构造函数中传递它：

function detail(name){
  this.name = name;
  this.html = this.name;
}

var detail1 = new detail();
console.log(detail1.html);

另一种解决方案是使 html 成为一个函数：

function detail(){
}
detail.prototype.html = function(){
   return this.name;
}
var detail1 = new detail();
detail1.name = 'xyz';
console.log(detail1.html()); // <- notice the parenthesis here : html is a function

第三个是html在您更改时进行更改name：

function detail(){
}
detail.prototype.setName = function(name){
   this.html = name;
}
var detail1 = new detail();
'xyz';
detail1.setName('xyz');
console.log(detail1.html);

Answer 2

将名称作为参数传递给函数。当前，当创建详细对象的新实例时，其 name 属性未定义。它是在调用构造函数之后设置的，这为时已晚。

function detail(name){
  this.html = "<li><a href='#'>"+name+"</a><a>"+"<li>";
}

var detail1 = new detail('xyz');
console.log(detail1.html);