javascript - Soalan mengenai prototaip?

Question

Saya menggunakan rantaian prototaip untuk menulis kaedah hubungan wilayah-bandar raya. Saya meletakkan pembolehubah ke dalam fungsi awal supaya saya boleh menggunakan rantaian prototaip untuk berkembang. Tiada masalah semasa pemulaan, tetapi ada masalah apabila saya menggunakan onchange untuk memilih wilayah atau bandar Pilihan atribut selectProvince dan selectCity tidak ditemui Saya mencari dan mendapati selectProvince dan selectCity tidak dikesan sama sekali semasa menggunakan onchange. Ya, saya jelas memulakannya dalam AddressInit, tetapi ia tidak dikesan. Bolehkah anda memberi saya penyelesaian?
Kod:
//Ini adalah sekeping pendek json

var provinceList = [{
    name: '北京',
    cityList: [{
        name: '市辖区',
        areaList: ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区']
    }, {
        name: '县',
        areaList: ['密云县', '延庆县']
    }]
}];

//Ini html

<select class="select-input" name="selectProvince" id="selectProvince"></select>
    <select class="select-input" name="selectCity" id="selectCity"></select>
    <select class="select-input" name="selectArea" id="selectArea"></select>

// Ini adalah js

var AddressInit = function(selectProvince, selectCity, selectArea, defaultProvince, defaultCity, defaultArea){
    this.selectProvince = document.getElementById(selectProvince);
    this.selectCity = document.getElementById(selectCity);
    this.selectArea = document.getElementById(selectArea);
    this.defaultProvince = defaultProvince || '';
    this.defaultCity = defaultCity || '';
    this.defaultArea = defaultArea || '';
}

AddressInit.prototype = {
    constructor: AddressInit,
    //初始化
    init: function(){
        for (var i = 0; i < provinceList.length; i++) {
            this.selectAddOption(this.selectProvince, provinceList[i].name, provinceList[i]);
        }
        this.selected(this.selectProvince, this.defaultProvince);
        this.changeProvince();
        this.selectProvince.onchange = this.changeProvince;
    },
    //判断是否有选中的值
    selected: function(select,str){
        for(var i = 0; i < select.options.length; i++) {
            if (select.options[i].value == str) {
                select.selectedIndex = i;
                return;
            }
        }
    },
    //添加option
    selectAddOption: function(select, str, obj) {
        var option = document.createElement("option");
            select.options.add(option);
            option.innerText = str;
            option.value = str;
            option.obj = obj;
    },
    //改变省
    changeProvince: function(){
        console.log(selectCity);
        this.selectCity.options.length = 0;
        this.selectCity.onchange = null;
        if (this.selectProvince.selectedIndex == -1) return;
        var item = this.selectProvince.options[this.selectProvince.selectedIndex].obj;
        for (var i = 0; i < item.cityList.length; i++) {
            this.selectAddOption(this.selectCity, item.cityList[i].name, item.cityList[i]);
        }
        this.selected(this.selectCity, this.defaultCity);
        this.changeCity();
        this.selectCity.onchange = this.changeCity;
    },
    //改变市
    changeCity: function(){
        this.selectArea.options.length = 0;
        if (this.selectCity.selectedIndex == -1) return;
        var item = this.selectCity.options[this.selectCity.selectedIndex].obj;
        for (var i = 0; i < item.areaList.length; i++) {
            this.selectAddOption(this.selectArea, item.areaList[i], null);
        }
        this.selected(this.selectArea, this.defaultArea);
    }
}

var ccc = new AddressInit('selectProvince', 'selectCity', 'selectArea');
ccc.init();

Answer 1

Fungsi panggil balik memerlukan persekitaran ini yang betul.

Letak baris ini

this.selectCity.onchange = this.changeCity;

ditukar kepada

this.selectCity.onchange = this.changeCity.bind(this);

Answer 2

Seperti yang dinyatakan di atas, terdapat masalah dengan penunjuk ini:

this.selectProvince.onchange = this.changeProvince;this.selectProvince.onchange = this.changeProvince;

你的意思是指select的change事件的处理函数为 this.changeProvince, 即对其的一个引用。

实际也就是如下：

document.getElementById(selectProvince).onchange = function(){
    console.log(selectCity);
    this.selectCity.options.length = 0; // 触发时报错this.selectCity为undefined 因为this是dom元素
    this.selectCity.onchange = null; // 触发时报错this.selectCity为undefined
    if (this.selectProvince.selectedIndex == -1) return; // 触发时报错this.selectProvince为undefined 下面的this基本都有问题 事件处理函数中this为dom元素，而不是你的实例对象。
    var item = this.selectProvince.options[this.selectProvince.selectedIndex].obj;
    for (var i = 0; i < item.cityList.length; i++) {
        this.selectAddOption(this.selectCity, item.cityList[i].name, item.cityList[i]);
    }
    this.selected(this.selectCity, this.defaultCity);
    this.changeCity();
    this.selectCity.onchange = this.changeCity;
}

能看出问题了吗？事件处理函数中的this指的是dom对象，即document.getElementById(selectProvince) 它上面当然没有你需要的东西了。

可以如楼上所言的换为this.selectCity.onchange = this.changeCity.bind(this)

this.selectCity.onchange = this.changeCity; 这样写 只是表示selectCity.onchange 也是 this.changeCity这个函数，在js中，this的指向是实际运行时才决定，在onchange事件触发时，this.changeCity 函数内的this为dom元素，所以就出错了。bind方法可以替换函数内的this指向，生成一个新的函数。

即this.changeCity.bind(this)这句在运行时，已经将this.changeCity函数内的this替换为了当前的this

Anda maksudkan bahawa fungsi pengendali acara perubahan pilih ialah this.changeProvince, yang merupakan rujukan kepadanya. #🎜🎜# #🎜🎜#Sebenarnya ia adalah seperti berikut: #🎜🎜# rrreee #🎜🎜#Bolehkah anda melihat masalahnya? ini dalam fungsi pengendalian acara merujuk kepada objek dom, iaitu, document.getElementById(selectProvince) Sudah tentu, tiada apa yang anda perlukan padanya. #🎜🎜# #🎜🎜# boleh digantikan dengan this.selectCity.onchange = this.changeCity.bind(this)#🎜🎜# seperti yang dinyatakan di atas #🎜🎜#this.selectCity.onchange = this.changeCity; Menulis dengan cara ini hanya bermakna selectCity.onchange juga merupakan fungsi this.changeCity Dalam js, titik daripada ini ialah Ia ditentukan semasa masa jalan sebenar Apabila peristiwa onchange dicetuskan, this.changeCity dalam fungsi this ialah elemen dom, jadi ralat berlaku. Kaedah bind boleh menggantikan penunjuk this dalam fungsi dan menjana fungsi baharu. #🎜🎜# #🎜🎜#Iaitu, this.changeCity.bind(this) telah menggantikan this dalam fungsi this.changeCity pada masa jalan untuk mencapai kesan yang anda perlukan untuk this semasa (ini merujuk kepada objek contoh anda). #🎜🎜#