文章目录
  1. 1. 0x1.前言
  2. 2. 0x2.介绍方法
  3. 3. 0x3.具体的代码示例(对象VS类方法)
  4. 4. 0x5. 同名情况
  5. 5. 0x4. 实例调用类方法
  6. 6. 0x5. Reference

0x1.前言

发现以前自己还写过一篇原型问题,看到一篇讲protoype的博客发现自己还不清不楚,顺便还介绍了各种方法,记录一下.

0x2.介绍方法

1.对象方法:

1
2
3
4
5
6
7
function product(name,price){
this.name = name;
this.price = price;
this.introduce = function(){
console.log('This product\'s name is: ' + this.name);
};
}

对象方法如名字所说,本质还是一个对象(Object).
不过可以用作一个类(class),可以通过new来实例化一个对象var car = new product('car',500000),其中product方法中的this因此将指针指向了car

2.类方法(本质是静态方法)

1
2
3
product.price = fucntion(){
console.log('The price is :' + this.price);// this -> product
}

可以看作这个函数本身添加了一个名为price属性函数(方法),但是在实例化过程中他不会被携带给实例,因为他没有办法传递(前面的传递是通过this指针来操作的)

3.原型方法

1
2
3
product.prototype.say = function(){
console.log('The product named ' + this.name + 'values $' + this.price);
}

总结: 对象方法含有this, 类方法根据对象名添加, 原型方法 class.prototype.func 看一下就行啦

0x3.具体的代码示例(对象VS类方法)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var BaseClass = function() {//对象方法
this.f1 = function(){
console.log(' This is a object function.');
}
};
BaseClass.f2 = function(){//静态方法(类方法)
console.log(' This is a static method ');
}
BaseClass.f2();

var instance1 = new BaseClass();//实例化

instance1.f1();
try{
instance1.f2();//instance1.f2 is not a function
}catch(err){
console.log('---Error:---\n' + err + '\n----');
}

console.log(Object.getOwnPropertyNames(instance1)); //[ 'f1' ]

0x5. 同名情况

只考虑对象方法和原型方法同名,类方法上面已经讨论,不纠结=. =

1
2
3
4
5
6
7
8
9
10
11
12
13
var product = function(name){
this.func = function(){
this.name = name;
console.log(1);
}
}
var car = new product();
product.prototype.func = function(){
console.log(2);
}
car.func(); // 1
delete car.func;
car.func(); // 2

只有在内置的对象方法被删除之后,语法才会去沿着原型链向上寻找同名函数

0x4. 实例调用类方法

1
object.price.call(object);

利用all或者apply调用过来(个人理解这是将词法作用域/上下文环境复制过来的意思)

0x5. Reference

javascript中静态方法、实例方法、内部方法和原型的一点见解_linder0209
JavaScript类方法,对象方法(this),原型方法(prototype)_hi-docs
JS中的prototype_轩脉刃

文章目录
  1. 1. 0x1.前言
  2. 2. 0x2.介绍方法
  3. 3. 0x3.具体的代码示例(对象VS类方法)
  4. 4. 0x5. 同名情况
  5. 5. 0x4. 实例调用类方法
  6. 6. 0x5. Reference