美文网首页
js面向对象实现面向对象(一)

js面向对象实现面向对象(一)

作者: 镜轩夕照 | 来源:发表于2019-07-06 01:22 被阅读0次

前言

众所周知周知,js是一个面向过程的弱类型动态语言,但是在开发的过程中为了良好的封装和功能的实现我们需要面向对象,比如静态类型方法,公有私有变量,方法,继承,多态等等,js可以用自己的“骚操作去实现”。而js的面向对象是建立在它是依靠原型链实现的。

类和实例属性方法,私有属性方法

new 关键词的作用,构造函数

  • 创建一个空对象,并使该空对象继承Func.prototype;
  • 执行构造函数,并将this指向刚刚创建的新对象;
  • 返回新对象
function Super(name,age) {
  this.name= name;//实例属性
  this.age = age;
  //实例方法
  this.show = function() {
    console.log(name,age)
  }
  // 实例私有属性
  var height = 180;
  // 实例私有方法  
  function _height() {
         console.log(height)
  }   
}
var boy = new Super('yzg',26);
boy.show() // yzg,26

如上所示,就能给对象新建一个类Super构造函数,有实例方法和属性和私有方法属性

静态私有属性和方法

这里我们利用闭包的原理,返回类。就可以在闭包内建立静态属性和方法

var Super = (function() {
      var salary = 20000; //静态私有属性
      //静态私有方法
      var showSalary = function(){
        console.log(salary)
      }
      var _Super = function(name,age) {
                 this.name= name; //实例属性
                 this.age = age;  
                 //实例方法
                 this.show = function() {
                     console.log(name,age)
                  }
                  // 实例私有属性
                var height = 180;
                // 实例私有方法  
                function _height() {
                       console.log(height)
                  }   
               }
      return _Super;
}())

实例公有方法和属性

我们可以利用function的protptye实现公共方法和属性

var Super = (function() {
      var salary = 20000; //静态私有属性
      //静态私有方法
      var showSalary = function(){
        console.log(salary)
      }
      var _Super = function(name,age) {
                 this.name= name; //实例属性
                 this.age = age;  
                 //实例方法
                 this.show = function() {
                     console.log(name,age)
                  }
                    // 实例私有属性
                var height = 180;
                // 实例私有方法  
                function _height() {
                       console.log(height)
                  }   
               }
     //实例公有属性  
     _Super.prototype.address='cn anhui';
     //实例公有方法  
     _Super.prototype.showAddress= function () {
                      console.log(this.address)
                   } 
      return _Super;
}())

实例公有方法和属性

我们可以利用function的protptye实现公共方法和属性

var Super = (function() {
      var salary = 20000; //静态私有属性
      //静态私有方法
      var showSalary = function(){
        console.log(salary)
      }
      var _Super = function(name,age) {
                 this.name= name; //实例属性
                 this.age = age;  
                 //实例方法
                 this.show = function() {
                     console.log(name,age)
                  }
                  // 实例私有属性
                 var height = 180;
                  // 实例私有方法  
                  function _show() {
                      console.log(height)
                   }   
               }
     //实例公有属性  
     _Super.prototype.address='cn anhui';
     //实例公有方法  
     _Super.prototype.showAddress= function () {
                      console.log(this.address)
                   } 
      return _Super;
}())

静态公有方法和属性

类似于实例的公有方法和属性,只不过这次我们是直接将属性绑定到构造函数上而不是挂在prototype上。

var Super = (function() {
      var salary = 20000; //静态私有属性
      //静态私有方法
      var showSalary = function(){
        console.log(salary)
      }
      var _Super = function(name,age) {
                 this.name= name; //实例属性
                 this.age = age;  
                 //实例方法
                 this.show = function() {
                     console.log(name,age)
                  }
                   // 实例私有属性
                var height = 180;
                // 实例私有方法  
                function _height() {
                       console.log(height)
                  }   
               }
     //实例公有属性  
     _Super.prototype.address='cn anhui';
     //实例公有方法  
     _Super.prototype.showAddress= function () {
                      console.log(this.address)
                   } 
    //静态公有属性
    _Super.company = 'dxyt';
   //静态公有方法
   _Super.showCompany = function () {
                      console.log(this.company)
                   } 
      return _Super;
}())

相关文章

  • JS面向对象精要(二)_函数

    JS面向对象精要(一)_原始类型和引用类型JS面向对象精要(二)_函数JS面向对象精要(三)_理解对象JS面向对象...

  • JS面向对象精要(三)_理解对象

    JS面向对象精要(一)_原始类型和引用类型JS面向对象精要(二)_函数JS面向对象精要(三)_理解对象JS面向对象...

  • JS面向对象精要(四)_构造函数和原型对象

    JS面向对象精要(一)_原始类型和引用类型JS面向对象精要(二)_函数JS面向对象精要(三)_理解对象JS面向对象...

  • JS面向对象精要(五)_继承

    JS面向对象精要(一)_原始类型和引用类型JS面向对象精要(二)_函数JS面向对象精要(三)_理解对象JS面向对象...

  • js面向对象实现面向对象(一)

    前言 众所周知周知,js是一个面向过程的弱类型动态语言,但是在开发的过程中为了良好的封装和功能的实现我们需要面向对...

  • js面向对象实现面向对象(二)

    上一篇讲到js实现对类对封装,本篇介绍类的继承,多态。 类的继承 类式继承 类式继承方式是将父类的实例赋在子类的原...

  • JS面向对象

    JS面向对象入门 1、面向对象语言概念面向对象语言主要包括 类、对象、封装、多肽。2、面向对象的编程思想面向过程思...

  • 面向对象基础

    面向对象编程包括: 面向对象的分析(OOA) 面向对象的设计(OOD) 面向对象的编程实现(OOP) 面向对象思想...

  • 面向对象基础

    一、面向对象概述 1、面向对象编程包括: OOA:面向对象分析OOD:面向对象的设计OOP:面向对象的编程实现 2...

  • 四、面向对象编程

    js的面向对象,有其独特之处。js不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程。如:...

网友评论

      本文标题:js面向对象实现面向对象(一)

      本文链接:https://www.haomeiwen.com/subject/vycuhctx.html