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

js中实例方法、静态方法和原型方法详解背景之前一直以为构造函数可以直接访问原型方法,是错的,现在说一下实例方法构造函数中this上添加的成员,在Cat构造方法里面,定义在this中的变量和方法,只有实例才能访问到:如this.name,this.move,this.eat这些都是实例拥有,无法通过Cat直接调用。functionCat(name){this.name=namethis.move=…

背景

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

实例方法

构造函数中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是原型方法

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/37843.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注