javascript - Des questions sur le prototype?

Question

J'utilise la chaîne prototype pour écrire une méthode de liaison province-ville. Je mets les variables dans la fonction initiale afin de pouvoir utiliser la chaîne prototype pour développer. Il n'y a eu aucun problème lors de l'initialisation, mais quelque chose s'est mal passé lorsque j'ai utilisé onchange pour sélectionner une province ou une ville. Les options d'attribut de selectProvince et selectCity n'ont pas été trouvées. J'ai recherché et constaté que selectProvince et selectCity n'étaient pas détectées du tout lors de l'utilisation. onchange. Ouais, je l'ai évidemment initialisé dans AddressInit, mais il n'a pas été détecté. Pourriez-vous s'il vous plaît me donner une solution ?
Code :
//Ceci est un court morceau de json

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

//C'est du 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>

//C'est 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

La fonction de rappel nécessite de corriger cet environnement.

Mettez cette ligne

this.selectCity.onchange = this.changeCity;

changé en

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

Answer 2

Comme mentionné ci-dessus, il y a un problème avec ce pointeur :

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

Vous voulez dire que la fonction de gestionnaire de l'événement change de select est this.changeProvince, qui y fait référence. 🎜 🎜En fait, c'est le suivant : 🎜 rrreee 🎜Voyez-vous le problème ? this dans la fonction de gestion des événements fait référence à l'objet dom, c'est-à-dire document.getElementById(selectProvince). Bien sûr, vous n'avez besoin de rien dessus. 🎜 🎜Vous pouvez le changer en this.selectCity.onchange = this.changeCity.bind(this)🎜 comme mentionné ci-dessus 🎜this.selectCity.onchange = this.changeCity; Écrire de cette façon signifie simplement que selectCity.onchange est aussi la fonction this.changeCity En js, le but de ceci est. le temps d'exécution réel Il a été décidé que lorsque l'événement onchange était déclenché, this dans la fonction this.changeCity était un élément dom, donc une erreur s'est produite. La méthode bind peut remplacer le pointeur this dans la fonction pour générer une nouvelle fonction. 🎜 🎜C'est-à-dire que lorsque la phrase this.changeCity.bind(this) est en cours d'exécution, this dans la fonction this.changeCity a été remplacé par le this actuel (this this fait référence à votre objet d'instance), afin d'obtenir l'effet dont vous avez besoin. 🎜