TS类变量修饰符

news/2024/7/24 8:12:26 标签: typescript, javascript, 前端

TS提供给了我们三个修饰符
public 共有属性
protected 保护属性
private 私有属性
我们来看看代码

typescript">class min{
  public name:String;
  constructor(name:String){
    this.name = name;
    console.log(this.name);
  }
}
class kowd extends min{
  constructor(name:String){
     super(name)
     console.log(this.name);
  }
}
let mint = new kowd('哈哈哈');
let mink = new min('哈哈哈');
console.log(mink.name);

这个类中的name我们定义了一个public共有属性
我们在子集的构造函数中打印了父类的name 有用mink实例化了min
然后在类的外部通过实例化的mink打印了他的name
打印效果如下
在这里插入图片描述
可能有些人会奇怪 不应该是 实例化min打印一次 min.name 类外打印一次 子类的构造函数中打印一次 三次吗?
为什么会打印四次
kowd继承min时也就相当于实例化了一次min 也会触发一次min的构造函数
因此打印了四次

可以看到 我们设置了public的变量 可以在类外通过实例化类通过.拿取类中的属性
如果我们将public改为protected 我们明显看到最后一行在类外获取变量的写法是报错了
我们去掉最后一行代码然后运行
在这里插入图片描述
打印效果如下
在这里插入图片描述

可以看到 设置了protected的变量就不能在类外访问了 只能在类本身和子类中访问属性
类外是无法访问的

再讲name设置为private
在这里插入图片描述
这是我们看到类外和子类中的打印代码都报错了
我们把他去掉就可以打印了

简单说 私有的就是 自由类本身可以访问 包括子类都无权访问


http://www.niftyadmin.cn/n/1037438.html

相关文章

element ui表格 禁止选择

有些时候我们就需要实现在一些状态下不能选择表格某些行数据的逻辑 主要要靠selectable <el-table:data"tableData"style"width: 100%;margin-top:15px"ref"rightTable"row-clickrowClick:row-class-name"tableRowClassName">…

element ui树形表格数据懒加载

element ui所谓的表格懒加载就是一次只展示一层的数据 <el-table:data"tableData"style"width: 100%;margin-top: 10px;"row-key"id"borderlazy:load"getChildrens":tree-props"{children: children, hasChildren: hasChildr…

SVG 图标格式文件去除文件默认颜色

SVG文件如果带有默认样式可能会导致css无法覆盖他本来的颜色 用编辑器打开SVG文件 在页面中查找 fill 属性 这个就是更改颜色的属性 把这样的代码通通干掉就好了

element ui树形懒加载

所为的属性懒加载其实就是一次只展示一层 当用户点击时再去根据他点击的这个数据去请求他的子集 <el-tree:load"loadNode":props"props"node-key"id"ref"tree"lazy><spanclass"custom-tree-node"style"displ…

vue强制让某个元素重新渲染

这个逻辑其实v-if就能实现 v-if可决定元素是否存在 <div v-if "min true">{{你好}}</div>我们现在看到min控制着这个元素是否存在于页面上 很多人可能会想 那从新渲染不就 this.min false; this.min true;但这样确实是没效果的 我们需要加一段代码…

TS定义函数接口

接口这两个字大家肯定不会太陌生 就算你没有接触过后台开发 也一定和后台对结果接口 TS的接口和java的接口有所不同 但也真的是非常同步的一个思想方向了 interface transmitName{(name:string):String }这里我们顶一个了一个接口 叫 setName 限定 要传入一个参数且必须是Stri…

Typescript泛型

interface condTrig{<T>(name:T):T }这里我们先定义一个泛型接口 var getData:condTrig function<T>(name:T){console.log(name);return name; }然后定义一个泛型函数来实现这个接口 最后 我们用两种方式来实现这个泛型函数 let userName getData<String&g…

uni-app轮播图实现之swiper

首先在data中定义一个图片数据的对象数组 data() {return {rotation: [{id: 1,url: https://imgcps.jd.com/ling4/100035927374/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa42/60f03300/cr/s/q.jpg},{id: 2,url: https://img12.360buyimg.com/pop/s1180x…