@昨晚和朋友聊了很久的编程思想;她跟我说:自己之前是一些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的属性指向他的构造函数;

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

Logo

前往低代码交流专区

更多推荐