美文网首页极客教程-前端开发让前端飞
从基础代码深入js面向对象

从基础代码深入js面向对象

作者: cbw100 | 来源:发表于2016-09-27 09:28 被阅读236次

认识面向对象

1、面向对象中的概念:

  • 一切事物皆对象
  • 对象具有封装和继承特性
  • 信息隐藏

基本面向对象

var person={
    name:"cll",
    age:22,
    run:function(){
        console.log("running")
  }
}
console.log(person.name);

函数构造器构造对象

function Person(){

}
Person.prototype={
    name:"cll",
    age:22,
    run:function(){
        console.log("running")
  }
}
var p=new Person();
p.age
p.name
p.eat()

深入js面向对象(面向对象的书写格式)

1、第一种写法:

function People(name){
    this._name=name;
}
People.prototype.say=function(){
    console.log("hello"+this._name);
}
function Student(name){
     this._name=name;
}
Student.prototype=new People(); //实现继承
var superSsay=Student.prototype.say;
Student.prototype.say=function(){  //复写父类的say方法
    superSsay.call(this);  //调用父类的say方法
    console.log("stu-hello"+this._name);
}
var s =new Student('cll');
s.say();

如果要将变量封装,则采用闭包,代码如下:

(function(){
    var n='cll';
    function People(name){
    this._name=name;
  }
    People.prototype.say=function(){
    console.log("hello"+this._name+n);
  }
  window.People=People;
})();
//同理,student也这样封装。

2、第二种写法:

function Person(name){
    var _this={}
    _this.name=name;
    _this.sayHello=function(){
      console.log('Hello');
   }
   return _this;
}
function Teacher(name){
    var _this=Person(name);
    var surperSay=_this.sayHello;
    _this.sayHello=function(){
      surperSay.call(_this);
      console.log('Thello'+this._name);
    }
    return _this;
}
var t=Teacher('cll');
t.sayHello();

假如要封装变量也是采用上面闭包的形式.

相关文章

  • 从基础代码深入js面向对象

    认识面向对象 1、面向对象中的概念: 一切事物皆对象 对象具有封装和继承特性 信息隐藏 基本面向对象 函数构造器构...

  • DAY2

    面向对象tab栏,完成增删改查HTML代码: JS代码:

  • JS基础

    JS基础 JS运算 JS代码块 JS对象 原型对象 GC 正则表达式

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

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

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

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

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

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

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

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

  • js面向对象

    本文将循序渐进的介绍js面向对象的基础知识。 什么是面向对象呢? 面向对象编程 (OOP : Object Ori...

  • JS面向对象(基础)

    一、面向过程和面向对象的区别、联系 1.面向过程编程:注重解决问题的步骤,分析问题需要的每一步,实现函数依次调用。...

  • Blue教程汇总

    【JavaScript从入门到精通】第二十四课 JS面向对象基础-01 【JavaScript从入门到精通】第二十...

网友评论

    本文标题:从基础代码深入js面向对象

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