js中的面向对象语法和编程思想
@昨晚和朋友聊了很久的编程思想;她跟我说:自己之前是一些CSS和HTML为主,对js涉猎的比较少,昨天老大突然让他做个新项目,新项目是以Vue和ES6以及jQuery为主打,老大让他以面向对象的思想去编写js代码。说是使用原型链的方式编程;他当时一脸懵逼, 那我咋办? 那么咱们下面就说说面向对象和原型链的问题。一、面向对象 ECMAScript有两种的开发模式:1、函数化(过程式),2
@昨晚和朋友聊了很久的编程思想;她跟我说:自己之前是一些CSS和HTML为主,对js涉猎的比较少,昨天老大突然让他做个新项目,新项目是以Vue和ES6以及jQuery为主打,老大让他以面向对象的思想去编写js代码。说是使用原型链的方式编程;他当时一脸懵逼, 那我咋办?
那么咱们下面就说说面向对象和原型链的问题。
一、面向对象
ECMAScript有两种的开发模式:1、函数化(过程式),2、面向对象(OOP).面向对象的语言有一个标志,那即是类的概念,通过类可以创建任意多个具有相同方法和属性的对象,然而,ECMAScript没有类的概念,因此它的对象也和类语言中的对象有所不同。
1、创建对象
var a = {
name: "king",
age: 18,
run: function(){
alert(this.name) ==>输出name的值;
}
}
但是缺点就是我如果需要很多这样的对象的时候,就会产生很多的代码;
这样我们在用工厂函数的方法去解决多代码的问题:
function createObj(name,age){
var obj = new Object();
obj.name = name,
obj.age= age,
obj.run = function(_){
return obj.name + obj.age
}
return run
}
在这里你就可以一直调用他了:例如:
var a = createObj("king",16);
var b = createObj("sun",10);
b();a()
这样好像是解决了代码多的上面的问题,但是又有新问题了,他会创建很多重复的有可能别的函数不会用到的属性;也会消耗内存的;
2、构造函数
构造函数的规范:@名字的首字母必须大写@必须使用new
function Body (name , age ) {
this.name = name;
this.age = age;
this.run = function ( ){
return this.name +this.age
}
}
var abody = new Body( "jry",23);
var bbody = new Body( "love",23);
abody.run(); bbody.run();
这里内存消耗的问题还是没有解决,而且有了新问题,当把它作为对象调用的时候this指向Body本身,而作为普通的函数调用的时候,this指向全局的Windows;即是this指向的问题
3、原型
我们在创建函数的时候都知道每一个函数都有一个prototype的原型属性,他的用途就是把一些公用的属性和方法放到原型对象上,下面我们看看代码你就明白了;
首先我们假设大家都会公用的方法是run,name,age;那么
function Body (){ }
Body . prototype . name = "Wang";
Body . prototype . age = 20;
Body . prototype . run = function(){
return this.name + this.age+ .....
};
然后我们new出新的对象实例就可以直接使用在原型对象上公用的方法了,可以在自己的新对象中定义自己需要的方法什么的了
var peso = function (name){
this.name = name;
}
pose.prototype.getName = function(){
return this.name;
}
var sss= new peso ('wangdachui');
sss.getName();
二、原型链(感谢博客园的@pompeybrain,这里直接使用你的例子)
1 function Person(name){
2 this.name = name;
3 var label = 'Person';
4 }
5
6 Person.prototype.nickName = 'PersonPrototype';
7
8 Person.prototype.greet = function(){
9 console.log('Hi! I am ' + this.name);
10 }
11
12 function Student(name,school){
13 this.name = name;
14 this.school = school;
15 var label = 'Student';
16 }
17
18 Student.prototype.__proto__ = Person.prototype;19
20 var p1 = new Person('p1');
21 var s1 = new Student('s1','USTB');
22 p1.greet();//Hi! I am p1
23 s1.greet();//Hi! I am s1
我们把它转换成一张图看看
这个图就完美的解释了原型链以及每个对象都有一个_proto_属性,也就是任何一个对象都可以是某一个对象的原型;而每一个原型对象都有一个constructor的属性指向他的构造函数;
需要看详情的朋友们可以点击这个链接:点击打开链接,也可以在下面留言评论交换看法。
更多推荐
所有评论(0)