弄懂JavaScript面向对象

好好弄下JavaScript面向对象,毕竟自己没对象。。。


plan

基本概念

哈哈,只是想简单的整理下js面向对象中的公有、私有、静态属性和方法的概念。

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

共有属性和共有方法

1
2
3
4
5
6
7
8
9
10
function User(name,age){
this.name = name; // 公有属性
this.age = age;
}
User.prototype.sayHi = function(){ // 公有方法
console.log('I am '+this.name +',' + this.age + '了')
}

let user1 = new User('冰洋',26)
user1.sayHi()

私有属性和私有方法

1
2
3
4
5
6
7
8
9
function User2(name,age){
var name = name; // 私有属性
var age = age;
function sayHi(){ // 私有方法
console.log('I am '+name +',' + age + '了')
}
sayHi()
}
let user2 = new User2('冰洋2',26)

静态属性和静态方法

在php中,无需实例化就可以调用的方法就叫静态方法,js也一样,无需实例化,即用new操作符实化对象,就可调用对象的方法和属性。

1
2
3
4
5
6
7
8
9
function User3(){}
User3.age = 26;
User3.myName = '冰洋3'
User3.sayHi = function(){
console.log(this.name) // 返回该构造函数短name属性了
console.log('I am '+this.myName +',' + this.age + '了')
}
// 无需实例化
User3.sayHi()

##

静态类

静态方法和属性无需安装以上得方法

1
2
3
4
5
6
7
8
9
10
11
var User4 = {
init:function(name,age){
this.name = name;
this.age = age;
},
sayHi:function(){
console.log('I am '+this.name +',' + this.age + '了')
}
}
User4.init('冰洋4',26)
User4.sayHi()

公有方法的调用规则

  • 调用公有方法,我们必需先实例化对象

坚持原创技术分享,您的支持是我前进的动力!