javascript - JS 内部对象使用外部对象的属性，该怎么写？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - JS 内部对象使用外部对象的属性，该怎么写？

高洛峰 2017-04-10 14:28:52

[JavaScript讨论组]

604

想实现：button里的text用o里的text。

var o = {
    text: '保存',
    buttons: [{
        text: o.text
    }]
};

这样写，Console 会报错，TypeError: Cannot read property 'text' of undefined。

并且，我想text,button属性一次性全放在对象o里定义，有方法没？

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(7)

大家讲道理2017-04-10 14:30:52 7楼

var o = {
  text: '保存',
  button: [{
    text: setTimeout(function(){o.button[0].text = o.text}, 0)
  }]
}

问题在于访问 o.text 时 o 的定义还未执行完成利用 setTimeout 延迟执行赋值操作可以达到效果

赞 +0

添加回复

巴扎黑2017-04-10 14:30:52 6楼

Javascript 只有全局作用域和函数作用域，所以不存在内部对象访问外部对象的问题，实际上你的 o.text 访问的就是全局作用域下的 o.text，由于 o 此时尚未定义完全，所以 o 是 undefined，自然而然 o.text 就会抛出 Cannot read property 'text' of undefined 的错误。

这种情形下可以这样处理：

var Obj = function() {
  var text = '保存',
    buttons = [{ text: text }];

  return {
    text: text,
    buttons: buttons,
  }
};

var o = new Obj();

对于评论中 @Dont 的需求，加一个参数即可：

var Obj = function(temp) {
  var text = temp,
    buttons = [{ text: text }];

  return {
    text: text,
    buttons: buttons,
  }
};

var o = new Obj('保存');

实现同步更新，可以这样操作：

var Obj = function() {
  var text = {
    value: '保存'
  },
    buttons = [{ text: text }];

  return {
    text: text,
    buttons: buttons,
  }
};

var o = new Obj();

貌似 ECMAScript6 的 observe 方法可以解决这类问题，就不需要强制改为引用值：

Object.observe(todoModel, function(changes) {
  ...
}

赞 +0

添加回复

PHP中文网2017-04-10 14:30:52 5楼

var text = '保存';
var o = {
    text: text,
    buttons: [{
        text: text
    }]
};

这样就不会报错了，不知道是不是你想要的

赞 +0

添加回复

天蓬老师2017-04-10 14:30:52 4楼

原因如StephenLee所说，正在定义对象期间，怎么访问呢？
所以，这么做即可。

var o={};
o.name='xiaohao';
o.button=[];
o.button.push({text:o.name});

赞 +0

添加回复

怪我咯2017-04-10 14:30:52 3楼

你这个概念是不是o是父类，下面有很多子类button，子类继承父类的属性即可。

你可以写一个inherit函数，把父类所有的属性复制到子类。

关于继承的方法网上也有很多

赞 +0

添加回复

怪我咯2017-04-10 14:30:52 2楼

看到你这个问题和我现在遇到的很像，请斑竹看下怎么办：
如下是一个外部js文件diagram.js：
(function($){
window.jUI ={};

    jUI.jDiagram ={
        _svg:"#jsvg",
        _labelPanel_id:"#labelpanel",
        _clickPathContain_id:"#clickPath",
        _mouseoverPathContain_id:"#overPath",
        _allPathContainer_id:"#showAllConnect",
        colunmgrp:{"website":50,"pool":350,"ip":650,"vs":950,"poolmember":1250,"websiteSORT":1,"poolSORT":2,"ipSORT":3,"vsSORT":4,"poolmemberSORT":5},
        datagroup:[],
        _data:[],

        __init__:function(){
            var self = this;
            console.log("$(self._svg):",$(self._svg).attr("name"));
        }

    }
})(jQuery);

下面是个html文件diagram.html：

<!DOCTYPE html>
<html>
<head>
    <title>pgsvgmin</title>

    <script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
    <style>
        #contain:hover text{
            cursor: pointer;
        }

        .mybtns {
            display: inline-block;
            vertical-align: top;
            padding: 0 15px;
            line-height: 22px;
            font-size: 12px;
            background-color: #61BA7A;
            color: #fff;
            border-radius: 20px;
            cursor: pointer;
            margin-right: 10px;
            float: right;
            border: none;
        }
        p.toolbar{
            padding: 25px 0px 25px 45px;
            background: rgb(228, 250, 228);
        }
        p.toolbar input,p.toolbar select.type{
            margin: 0px 45px 0px 0px;
        }
    </style>
    <script language="javascript" type="text/javascript" src="diagram.js"></script>
    var myDiagram = jUI.jDiagram;
    myDiagram._svg="#jsvg1";
    myDiagram._labelPanel_id="#labelpanel1";
    myDiagram._clickPathContain_id="#clickPath1";
    myDiagram._mouseoverPathContain_id="#overPath1";
    myDiagram._allPathContainer_id="#showAllConnect1";
    myDiagram.__init__();

</script>
</head>
<body>
    <p class="toolbar">
        Type:<select class="type">
          <option value="website">Website</option>
          <option value="pool">Pool</option>
          <option value="name">Name</option>
          <option value="vs">VS</option>
          <option value="poolmember">PoolMember</option>
        </select>
        Text:<input id="searchtext" placeholder="input word..." name="some_name" value="" id="some_name"/>
        <input class="mybtns search" type="button" style="float: inherit;" value="Search"/>
        X-axis:<input id="xxx" />
        Y-axis:<input id="yyy" />

        <input class="mybtns showall" type="button" style="float: inherit;" value="Show All Connections"/>
    </p>
<svg  style="width: 100%;height: 350px;" id="jsvg1" name="12222" >
    <g id="labelpanel1" onmousemove="mouseMove(evt)">

    </g>
    <g id="showAllConnect1"></g>
    <g id="clickPath1"></g>
    <g id="overPath1"></g>
</svg>
<p id="showdata"></p>

</body>
</html>

希望打印出svg的name值，上面js文件中显示的是undefined，也就是说这样子是得不到这个svg对象的，该怎么办呢？

赞 +0

添加回复

高洛峰2017-04-10 14:30:52 1楼

this引用

var o = {
text: text,
buttons: [{
    text: this.text
}]

};

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>