Usando mapas Tencent e funções de seta

1. Introduzir chave

Insira a descrição da imagem aqui

2. Modifique a visualização do código-fonte

Insira a descrição da imagem aqui

2.1 Adição de código

Insira a descrição da imagem aqui

3. Uso do código da página

uni.chooseLocation({
    
    
	success: res => {
    
    
		console.log('位置名称:' + res.name);
		console.log('详细地址:' + res.address);
		console.log('纬度:' + res.latitude);
		console.log('经度:' + res.longitude);
		console.log(res.address + res.name);
		this.value8 = res.address + res.name; //赋值给data中value8
		// console.log(this.value8)
	}
});

3.1 Função de seta

Durante as entrevistas, o ES6 é um grande ponto de teste. Quando questionados sobre as funções de seta, todos dizemos: as funções de seta são muito fáceis de usar e você não precisa mais se preocupar com a direção disso.

Entrevistador: As funções de seta são muito fáceis de usar, mas quais são os cenários em que as funções de seta não são adequadas?

3.1.2 Métodos de objeto

Isso na função de seta aponta para
y que não está definido no contexto da janela, portanto, indefinido é retornado.

    whl: () => {
    
    
        console.log(this === window); // => true
        console.log(this.y); // undefined
    }

Use sintaxe curta ES6 ou expressões de função tradicionais

	whl() {
    
    
	    console.log(this === test); // => true
	    console.log(this.x); // 1
	}

3.1.2 Método protótipo

Funções de seta causam erros contextuais (não permitindo a comunicação de instruções)

function Cat (name) {
    
    
    this.name = name;
}

Cat.prototype.sayCatName = () => {
    
    
    console.log(this === window); // => true
    return this.name;
};

const cat = new Cat('Miao');
cat.sayCatName(); // => undefined

Solução: Depois de usar expressões de função tradicionais aqui, o contexto quando chamado apontará para a instância cat recém-criada.

function Cat (name) {
    
    
    this.name = name;
}

Cat.prototype.sayCatName = function () {
    
    
    console.log(this === cat); // => true
    return this.name;
};


const cat = new Cat('Miao');
cat.sayCatName(); // => Miao
3.1.2 Retorno de chamada de evento

Assim como um evento de clique de ligação btn, este no método de clique de escuta do evento apontará para a janela.Ao usar o próprio this.innerHTML, é equivalente a window.innerHTML.

const btn = document.getElementById('myButton');
btn.addEventListener('click', () => {
    
    
  console.log(this === window); // => true
  this.innerHTML = 'Clicked button';
});

Solução: use expressões de função em vez de funções de seta

btn.addEventListener('click', function() {
    
    
    console.log(this === btn); // => true
    this.innerHTML = 'Clicked button';
});

3.1.2 Construtor

As funções de seta não podem ser chamadas usando a palavra-chave new: como não há método construtor nas funções de seta, elas não podem ser usadas como construtores.

const Message = (text) => {
    
    
    this.text = text;
};

var helloMessage = new Message('Hello World!');
// Uncaught TypeError: Message is not a constructor

Solução

const Message = function (text)  {
    
    
    this.text = text;
};

var helloMessage = new Message('Hello World!');
// Uncaught TypeError: Message is not a constructor

Resumir

1. As funções de seta são adequadas para problemas não relacionados a isso, temporizadores e retornos de chamada de métodos de array.
2. As funções de seta não são adequadas para retornos de chamada, retornos de chamada de eventos e métodos de objeto relacionados a isso.

Acho que você gosta

Origin blog.csdn.net/m0_62496369/article/details/127160305
Recomendado
Clasificación