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

我们先来看一个例子来看一下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. Pwn-level0

    题目地址 https://dn.jarvisoj.com/challengefiles/level0.b9ded3801d6dd36a97468e128b81a65d 第一步先看文件的属性    64 ...

  2. 剑指Offer-8.跳台阶(C++/Java)

    题目: 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 分析: 实际上就是斐波那契数列的一个应用,青蛙跳上n级台阶的跳法数等于跳 ...

  3. vs code 中配置git go

    { "window.zoomLevel": 1, "editor.fontSize": 15, //"files.autoSave": &q ...

  4. nginx 一键安装

    #!/bin/bash1. 关闭防火墙 和 selinux service iptables stopsetenforce 0 2. 判断是否有nginx服务netstat -ntlp |grep n ...

  5. SSM配置动态数据源

    多数据源配置主要涉及自定义类(DataSource注解类.DataSourceAspect切面类,动态数据源接口实现类.以及数据源字符串线程保存类),pom.xml文件.applicationCont ...

  6. centos7彻底卸载mysql和通过yum安装mysql

    彻底卸载mysql 查看是否有安装的mysql rpm -qa | grep -i mysql // 查看命令1 1 这里写图片描述 yum list install mysql* // 查看命令2 ...

  7. Windows Azure Virtual Machine (38) 跨租户迁移使用托管磁盘的Azure虚拟机

    <Windows Azure Platform 系列文章目录> 背景介绍: (1)我们建议使用Azure Manage Disk托管磁盘来创建Azure虚拟机 (2)使用托管磁盘的好处是, ...

  8. Javal连载4-注释&class与public class区别

    一.Java注释 1.作用:不会编译倒.class文件之中:增强可读性 2.分类: (1)单行注释(只注释当前行):// (2)多行注释: /* 注释 注释 注释 */ (3)javadoc注释 /* ...

  9. mysql 写计数器需要注意的问题

    MySql计数器,如网站点击数,如何实现高性能高并发的计数器功能 由于并发的时候 不能同时写入一行数据 所以要分开写<pre>先创建表CREATE TABLE `article_view` ...

  10. Vue.js 源码分析(二十四) 高级应用 自定义指令详解

    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上 ...