"TypeError: Cannot set property 'isshow' of null ,搞懂this的作用域-优快云博客

======================================================================
下面是我写的一个小demo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue2.6.10.js"></script>
</head>

<body>

    <div id="appfather"><button v-show="isshow=true" @click="showthis">点击1</button>
        <div v-show="isshow"><button v-show="isshow" @click="showthis">点击2</button>
            <div v-show="isshow">
                <button v-show="isshow">点击3</button>
            </div>
        </div>
    </div>

    <script>
        var ap1 = new Vue({
            el: "#appfather",
            data: {
                isshow: false,
            },
            methods: {
                showthis: function () {
                    // this.isshow = !isshow 
                    // var el = event.currentTarget
                    var el = event.currentTarget.firstElementChild;
                    el.isshow = !isshow
                    // alert(el.innerText);
                    //报错:ishow of null
                }
            }
        })
    </script>

</body >
</html >

想达到的效果就是,用vue操作DOM,达到点击的时候展示当前元素和他的子级别元素,错儿实现tab树形手风琴导航栏,本身不会前端,知道一点vue,就这样写了,在这个版本之前还有用点击自身修改其他元素的show值的笨办法,项通过操作DOM简单实现,可是一直报错,最后搜到是作用域的问题, 下面是this的详解,记录一下,搞懂之后再来修改案例.

=====================================================================

(转) 掘金 https://juejin.im/post/5c7bef126fb9a049c043c077

【ES6基础】箭头函数（Arrow functions）

ES6中，除了let和const新特性，箭头函数是使用频率最高的新特性了。如果你曾经了解如日中天的JavaScript衍生语言CoffeeScript, 就会清楚此特性并非ES6独创。箭头函数顾名思义是使用箭头（=>）定义的函数，属于匿名函数一类。

今天的文章内容将会从以下几个方面，介绍箭头函数：

使用语法
this穿透
箭头函数和传统函数的区别
本篇文章阅读时间预计8分钟

使用语法
箭头函数有四种使用语法

1、单一参数的单行箭头函数

如下段代码所示，很简单：

const fn= foo =>${foo} world;复制代码
这是箭头函数最简洁的形式，常用于用作简单的处理函数，如过滤。如下段代码所示：

let array=[‘a’,‘bc’,‘def’,‘ghij’];
array=array.filter(item=>item.length>=2);复制代码
2、多参数的单行箭头函数语法也很简单，如下段代码所示：

const fn=(foo,bar) => foo+bar复制代码
在实际开发中，函数的参数不会只有一个，在箭头函数中，多参数的语法跟普通函数一样，用括号包裹参数项。我们经常处理函数，如排序，示例代码如下：

let array=[‘a’,‘bc’,‘def’,‘ghij’];
array=array.sort((a,b) => a.length < b.length);复制代码
3、多行箭头函数单一参数，如下段代码所示：

foo => {
return ${foo} world;
}复制代码
多参数，如下段代码所示：

(foo,bar) => {
return foo+bar;
}复制代码
4、无参数箭头函数

如果一个箭头函数无参数传入，则需要用一对空的括号来表示空的参数列表。

const greet = () => 'Hello World’复制代码
以上都是被支持的箭头函数的表达方式，其最大的好处就是简单明了，省略了function关键字，而使用 => 代替。相对于传统的function函数，箭头函数在简单的函数使用中更为简洁直观。

书写箭头的函数过程中，我们应该注意以下几点：

1、使用单行箭头函数时，应避免换行

错误的用法，如下段代码所示：

const fn=x
=> x*2 //SyntaxError复制代码
正确的写法，如下：

const fn= x => x*2 //ok复制代码
2、参数列别的右括弧、箭头应在一行

错误的用法，如下段代码所示：

const fn = (x,y) //SyntaxError
=> {
return x*y;
}复制代码
下段代码书写是正确的：

const fn= (x,y) => { //ok
return x*y
}

const fn= (x,
y) => { //ok
return x*y
}复制代码
3、单行箭头函数返回只能包含一条语句

错误的书写，如下段代码所示：

const fn1= x => x=x*2; return x+2; //SyntaxError复制代码
正确的书写，如下段代码所示：

const fn2= x => {
x=x*2;
return x+2;
} //ok复制代码
4、如果单行箭头返回一个对象，请用圆括号包裹

错误的书写，如下段代码所示,解析引擎会将其解析成一个多行箭头函数：

const ids=[1,2,3];
const users=ids.map(id=>{id:id});
//wrong:[ undefined, undefined, undefined ]复制代码
正确的书写，如下段代码所示：

const ids=[1,2,3];
const users=ids.map(id=>({id:id}));
//Correct:[ { id: 1 }, { id: 2 }, { id: 3 } ]复制代码
箭头函数十分简洁，特别适合单行回调函数的定义，比如我们有以下需求:

我们有一个这样的名字数组names,[‘Will’,‘Jack’,‘Peter’,‘Steve’,‘John’,‘Hugo’,‘Mike’]，输出序号为偶数的名字[ ‘Will’, ‘Peter’, ‘John’, ‘Mike’ ],我们如何使用箭头函数在一行语句完成呢，如下段代码所示：

const names=[‘Will’,‘Jack’,‘Peter’,‘Steve’,‘John’,‘Hugo’,‘Mike’];
const newSet=names
.map((name,index)=>({
id:index,
name:name
}))
.filter(man => man.id %2 ==0)
.map(man => [man.name])
.reduce((a,b) => a.concat(b))复制代码
this穿透
事实上，箭头函数不仅书写简洁，还有一个神奇的功能，就是将函数内部的this延伸上一层作用域中，及上一层的上下文会穿透到内层的箭头函数中，让我们先看一段实际的例子，如下段所示：