一、静态方法与实例方法的例子:

我们先来看一个例子来看一下JS中的静态方法和实例方法到底是什么?

静态方法:

function A(){}

A.col='red'  //静态属性

A.sayMeS=function(){

console.log("Hello World S!");

}

A.sayMeS();//输出Hello World S!

实例方法:

function A(){

this.Color="yellow"  //实例属性

}

A.prototype.age=14;  //实例属性

A.prototype.sayMeE=function(){

console.log("Hello World E!");

}

var a=new A();

a.sayMeE();//输出Hello World E!

注意:我们还有一种写法,如下:

A.prototype = new Animal();

或者

A.prototype = {
    aa:32323,
    say: function() { console.log("My color is " + this.color); }
}

这个写法,会覆盖前面的A.prototype.age  和  A.prototype.sayMeE ,所以一定要注意顺序,把这个两种写法放到前面,然后再写自己定义的

二、二者的区别:

从定义上,实例方法要用到function这个对象中的prototype属性来定义,静态方法通过A.直接定义;从方法调用上,静态方法可以直接通过A.来调用,实例方法要通过先定义一个引用变量,指向构造函数定义的新对象。

我们之前的博文已经讨论过JS对象、构造函数、原型(参看Js中的对象、构造函数、原型、原型链及继承),这里加深一下理解,我们之前已经说过函数是一个对象,函数对象中的属性 prototype可以想成一个指针,指向一个方法(这样不用每一次用构造函数创造一个新实例后都要将方法重新创建一遍)。这样就好理解了,var a是A的一个引用,也就是指针,a就可以指向sayMeE这个方法,如果直接A.sayMeE()是会报错的,因为A不是一个指针,a.sayMeS()也会报错,因为a不是一个方法对象。

三、再谈继承:

继承举例:

function A(){ }

A.prototype.sayMeE=function(){
    console.log("Hello World E!");
}

function B(){ }

B.prototype=new A();//实现了继承

继承就是将B的指针指向A对象,这种形式是用A的构造函数来构建对象。

出处:https://www.cnblogs.com/hanguidong/p/9296697.html

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

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

实例方法
构造函数中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://blog.csdn.net/qq_38262910/article/details/90512130

参考:https://blog.csdn.net/weixin_42006492/article/details/83753847

JS中的实例方法、静态方法、实例属性、静态属性的更多相关文章

  1. JS中的prototype、__proto__与constructor属性

    作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...

  2. JS中的实例方法与静态方法

    一.静态方法与实例方法的例子: 我们先来看一个例子来看一下JS中的静态方法和实例方法到底是什么 静态方法: function A(){} A.sayMeS=function(){ console.lo ...

  3. js面向对象之公有、私有、静态属性和方法详解

    现下,javascript大行其道,对于网站开发人员来说,javascript是必需掌据的一门语言,但随着jquery等框架的流行和使用,许多人对于原生javascript缺乏深入的理解,习惯了函数式 ...

  4. 学习练习 java 实例属性 静态属性

    package com.hanqi; public class Test11Car11 { //静态 //实例属性 private int m = 0; //静态属性 //所有实例共有的,在内存里只有 ...

  5. 详解JS中DOM 元素的 attribute 和 property 属性

    一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...

  6. JS中的回调函数实例浅析

    本文实例讲述了JS中的回调函数.分享给大家供大家参考,具体如下: 在说回调函数之前,不妨先看一段代码,相信有点js基础的同学都能明白他的含义: ? 1 2 3 document.getElementB ...

  7. Day 19:面向对象【类方法】静态属性/静态属性/类方法

    静态属性  @property  class Mom: gender = "woman" def __init__(self,name,weight): self.name = n ...

  8. JS中构造函数与原型对象的同名属性,实例会取哪一个

    构造函数与原型对象的同名属性,实例会取哪一个? 看了下面的过程,再回忆JS高程3里关于这部分的示意图.实例my在new的时候,本身就获得了a属性,所以my.a是1,倘若在new的时候如果没有赋予a属性 ...

  9. JS中的动态合集与静态合集

    JS的动态合集 前言 DOM是JavaScript重要组成部分,在DOM中有三个特别的集合分别是NodeList(节点的集合),NamedNodeMap(元素属性的集合)和HTMLCollection ...

随机推荐

  1. 汇编和C/C++的混合编程方式

    常用的有三种方式: 在C/C++代码中嵌入汇编指令 汇编调用C/C++ C/C++中调用汇编 实例一: 在C中嵌入汇编: void string_copy(char *dst,const char * ...

  2. ACM-后序遍历(简单方法和正规方法)

    1.后序遍历简单方法 /**二叉树遍历一般有三种方法:前序,中序,后序.*其中前序遍历u顺序为:根->左子树->右子树,在此定义一种新的遍历方法:根->右子树->左子u树*使用 ...

  3. destoon模块绑定二级域名出现 File not found解决办法

    昨天晚上帮一个朋友给我说他绑定模块二级域名出现 File not found,所以今天分享关于解决办法. 模块启用二级域名后,首页打开正常,但是点内容页和列表页出现File not found. 解决 ...

  4. php 学习笔记之搭建开发环境(mac版)

    Mac 系统默认集成了很多开发工具,其中就包括 php 所需要的一些软件工具. 下面我们将搭建最简单的 php 开发环境,每一步都会验证上一步的操作结构,请一步一步跟我一起搭建吧! web 服务器之 ...

  5. OpenStack I18N

    OpenStack I18N 官方文档: https://docs.openstack.org/oslo.i18n/latest/user/usage.html https://docs.openst ...

  6. Office Online Server 在线编辑Office文档,安装部署

    Office Online Server部署安装 部署环境 一台windows server2012 (搭建域环境)/多次遇坑之后,强烈建议域环境为server2012 一台windows serve ...

  7. 这几款我私藏的Markdown编辑器,今天分享给你

    相信很多人都使用 Markdown 来编写文章,Markdown 语法简洁,使用起来很是方便,而且各大平台几乎都已支持 Markdown 语法 那么,如何选择一款趁手的 Markdown 编辑器,就是 ...

  8. 解决 Ubuntu16.04 + opencv4.1 源码编译错误 Makefile:160: recipe for target 'all' failed

    最近源码编译 opencv,出现下面的错误 [ %] Built target opencv_dnn Makefile:: recipe for target 'all' failed google ...

  9. 解锁云原生 AI 技能|在 Kubernetes 上构建机器学习系统

    本系列将利用阿里云容器服务,帮助您上手 Kubeflow Pipelines. 介绍 机器学习的工程复杂度,除了来自于常见的软件开发问题外,还和机器学习数据驱动的特点相关.而这就带来了其工作流程链路更 ...

  10. Spring源码系列 — BeanDefinition

    一.前言 回顾 在Spring源码系列第二篇中介绍了Environment组件,后续又介绍Spring中Resource的抽象,但是对于上下文的启动过程详解并未继续.经过一个星期的准备,梳理了Spri ...