javascript - push()函数undefined

问题描述

问 题

想把连接websocket的ws export出去后在别的地方拿到resList

var websocket = null;
const ws = {
    resList:[],
    socket:null,
    init:function () {
        websocket = new WebSocket("ws://127.0.0.1:8006");
        websocket.onopen = function (evt) {
            var _this = this;
            console.log("连接到websocket服务端");
            websocket.send('{"manager_mac": "000C43E11203","manager_id": "1"}');
        };
        websocket.onclose = function (evt) {
            console.log("关闭socket");
        };
        websocket.onmessage = function (evt) {
            var _this = this;
            console.log('接收服务端推送的信息: ' + evt.data);
            _this.resList.push(evt.data);
        };
        websocket.onerror = function (evt) {
            console.log('socket连接错误: ' + evt.data);
        };
        this.socket = websocket;
    },
    // send:function (msg) {
    //     websocket.send(msg);
    // },
    // clearResList:function () {
    //     var _this = this;
    //     _this.resList = [];
    // }
}

export default ws

解决方案

var websocket = {}
var ws = {
    resList: [],
    socket:null,
    init: function() {
        websocket.onopen = function() {
            var _this = this
            console.log(_this)
        }
    },
}

ws.init()
websocket.onopen()

在google chrome 的console中cv以上代码，这是你的代码简化版，可以看到输出的_this指向websock对象,因为此时调用onopen方法的是websock，符合this的隐式绑定原则；我们把var _this = this 移到init()作用域，就像这样：

var websocket = {}
var ws = {
    resList: [],
    socket:null,
    init: function() {
        var _this = this
        websocket.onopen = function() {
            console.log(_this)
        }
    },
}

ws.init()
websocket.onopen()

再输出就发现，_this将init()的this带了进来，因为init()由ws调用，所以他的this指向ws,从而_this也指向ws，符合你的要求

如果你对this绑定有疑问，可以参考我的博客

或者，如果你们使用es6的话，可以使用胖箭头函数：

var websocket = {}
var ws = {
    resList: [],
    socket:null,
    init: function() {
        websocket.onopen = () => {
            console.log(this)
        }
    },
}

ws.init()
websocket.onopen()

这篇关于javascript - push()函数undefined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！