js中的面向对象语法和编程思想

@昨晚和朋友聊了很久的编程思想；她跟我说：自己之前是一些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

我们把它转换成一张图看看

js中的面向对象语法和编程思想

这个图就完美的解释了原型链以及每个对象都有一个_proto_属性，也就是任何一个对象都可以是某一个对象的原型；而每一个原型对象都有一个constructor的属性指向他的构造函数；

需要看详情的朋友们可以点击这个链接：点击打开链接，也可以在下面留言评论交换看法。

js中的面向对象语法和编程思想

相关推荐