js中实例方法、静态方法和原型方法详解

news/2024/7/19 15:31:56 标签: js, 静态方法, 原型方法, 实例方法, 详解

背景

之前一直以为构造函数可以直接访问原型方法,是错的,现在说一下

实例方法

构造函数中this上添加的成员 ,在Cat构造方法里面,定义在this中的变量和方法,只有实例才能访问到:如this.name,this.move,this.eat这些都是实例拥有,无法通过Cat直接调用。

function Cat(name){
  this.name = name
  this.move = function() {
    console.log('移动')
  }
  this.eat = function() {
    console.log(`${this.name}爱吃鱼`)
  }
}
//给Cat构造函数添加静态方法
Cat.eat = function() {console.log(`${this.name}爱吃鱼`)}
let cat = new Cat('tom')
Cat.eat()  //Cat爱吃鱼  //这是静态方法
Cat.move() //Cat.move is not a function
cat.eat()  //tom爱吃鱼  //这是实例方法
cat.move()  //移动     //这是实例方法

静态方法

构造函数本身上添加的成员 

下面的Cat.eat就是构造函数的静态方法,不能通过实例调用

function Cat(name){
  this.move = function() {
   console.log(1)
  }
}
//直接定义在Cat构造函数中,实例不能调用
Cat.eat = function() {console.log(`${this.name}爱吃鱼`)}
构造函数调用
Cat.eat()  //Cat爱吃鱼
Cat.move()  //Cat.move is not a function
let cat = new Cat()
cat.eat()  //cat.eat is not a function

原型方法

原型中的方法实例和构造函数都可以访问到

function Cat() {
}
Cat.eat = function() {
  console.log('静态方法')
}
Cat.prototype.eat = function() {
 console.log('原型方法')
}
let cat = new Cat()
Cat.eat()  //静态方法
Cat.prototype.eat()  //原型方法,不用prototype就是打印静态方法

cat.eat()  //原型方法

结论

简而言之,实例方法就是只有实例可以调用,静态方法只有构造函数可以调用,原型方法是实例和构造函数都可以调用,是共享的方法。

像Promise.all和Promise.race这些就是静态方法,Promise.prototype.then这些就是原型方法,new 出来的实例可以调用

let promise = new Promise(function(resolve, rejected) {
                 resolve()
              }) 
 promise.then()   //then是原型方法

 


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

相关文章

python requests get请求_python+requests进行get、post方法接口测试

简介:Requests 是用Python语言编写,基于 urllib,采用 Apache2 Licensed 开源协议的 HTTP 库。它比 urllib 更加方便,可以节约我们大量的工作,完全满足 HTTP 测试需求。Requests 的哲学是以 PEP 20 的习语为中心开发的&…

react-动态声明类名和动态设置内联样式

需求 1.有一列导航条,我们需要根据当前点击的导航来设置样式。 2。表格中有价格一列,价格为空时显示为-,不为空时显示价格, 但是价格是红色,如下 当金额小记为空时,显示的时黑色的-,有价格时应…

设置Tomcat默认访问路径

步骤&#xff1a; 1、打开server.xml,在</Host>的上一行添加内容格式如下 <Context path"" reloadable"true" docBase"<项目名>"/> 如: <Context path"" docBase"gps" debug"0" reloada…

java cxf 第一次特别慢_Java程序员,按照这份模板“优化”简历,至少让你涨薪50%!...

​什么是好的技术简历&#xff1f;首先&#xff0c;一份好的简历不光说明事实&#xff0c;更通过FAB模式来增强其说服力。Feature&#xff1a;是什么Advantage&#xff1a;比别人好在哪些地方Benefit&#xff1a;如果雇佣你&#xff0c;招聘方会得到什么好处其次&#xff0c;写…

ant-degisn的数字输入框的使用和表格的价格计算

需求 1.最近在项目中需要用表格计算价格&#xff0c;所以需要用到ant-design中的数字输入框。如下图 这里有两个表格&#xff0c;我需要实现的是 1.表格内价格的计算和总价格的计算 2.数字输入框只能输入1-99的数字&#xff0c;不能输入中文。 实现 1.数据格式。 这里从…

Vue脚手架(vue-cli)搭建和目录结构详解

一、环境搭建 1、安装node、npm、webpack&#xff0c;不多说 2、安装vue-cli脚手架构建工具&#xff0c;打开命令行工具输入&#xff1a;npm install vue-cli -g&#xff0c;安装完成之后输入 vue -V&#xff08;注意这里是大写的“V”&#xff09;&#xff0c;如果出现相应的版…

golang for循环_go语言的中的for循环之大坑

For循环在我们日常编码中可能用的很多。在很多业务场景中我们都需要用for循环处理。但golang中的for循环有一个大大大的坑&#xff0c;大家可否遇到。直接上代码&#xff1a;我们写一个测试类&#xff0c;定义一个切片数组&#xff0c;然后循环迭代每个元素&#xff0c;将元素的…

重写react项目(一)使用less

react默认是不暴露webpack配置的&#xff0c;但是我们可以通过一些插件在不暴露webpack的情况下使用less 需要借助两个库react-app-rewired和customize-cra 1.安装react-app-rewired https://github.com/timarney/react-app-rewired/ npm install react-app-rewired --save…