JS中的实例方法、静态方法、实例属性、静态属性

一、静态方法与实例方法

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

静态方法

function A(){}

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

A.sayMeS=function(){

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

}

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

//对象的静态属性和方法

fun={
aaa:"123",
bbb:"ooo",
ccc:(n)=>{console.info("hhhhhh"+n);}
}

实例方法

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() //原型方法