2017-03-24 面向对象预习笔记 2

面向对象的三大特性

  • 封装、继承、多态
  • 封装
  • 作用：方便代码的维护，提高代码的复用性，更虐泉的访问数据的方式
  • 注意：js 的封装多了一层意思，就是使用对象来封装变量和函数
var type = '喜剧';
var actors = ['赵丽颖','彭于晏','李荣浩','邓超'];
var showTime = '2017-2-17 2017-3-17';
var director = '韩寒';
var play = function(){
        console.log('播放。。。。');
}

var film = {
        type = "喜剧"；
        actors:['赵丽颖','彭于晏','李荣浩','邓超'];
        showTime:'2017-2-17 2017-3-17';
        director:'韩寒';
        play:function(){
                console.log('播放....');
        }
};
console.log(film);
type = '动作片';
  • 继承
  • 现实生活中的继承：继承遗产，一个人获得另一个人所拥有的财富或者是资源的方式
  • 编程语言中的继承：一个类（对象）获得另外一个类（对象）的属性和方法的一种方式。
  • 面向对象的语言特征：类（C++）C（没有类），js 中没有类（class），支持面向对象的语言
  • 多态
    多种形态
  • 表现：
    对于相同的操作，不同的对象表现出不同的行为
    隐藏不同
  • 实现：
    js 天生具备多态的特性（弱类型的语言）
var obj1 = {name:'zhangsan',age:20};
var obj2 = {};
for(var k in obj1){
        //点语法在这里获取不到obj2.k = obj1.k;
        obj2[k] = obj1[k];
}
console.log(obj2);

内置构造函数的方式创建对象

  • 内置构造函数
Object Function(String Number Boolean) Array Date...

创建对象

//创建不同类型的对象
var obj = new Object();
var date = new Date();
var str = 'demo';   //string
var strObj = new String('demo');  //object
var strObj2 = String('demo'); //string
var strObj3 = new Object('demo'); //object
console.log(str == strObj); 
console.log(str == strObj2);
console.log(str === strObj); 
console.log(str.length);
  • 如果需要创建多个相似的对象，那么代码中冗余度太高（重复的代码太多）
//创建对象
var book1 = new Object();
//设置属性
book1.name = "花田半亩";
book1.author = "田维";
book1.price = "40.01";
//设置方法
book1.logDes = function(){
        console.log('书名：' + this.name);
}
book1.logDes();
//创建多个对象
var book2 = new Object();
book2.name = "三国演义";
book2.author = "罗贯中";
book2.price = "34.01";
book2.logDes = function (){
        console.log("书名：" + this.name);
    }
console.log(book1);
console.log(book2);

简单工厂函数创建对象

//提供函数（工厂函数）
function createBook(){
        //创建空对象
        var o = new Object();
        //设置属性和方法
        o.name = '默认的名称';
        o.author = '默认的作者';
        o.logDes = function(){
                console.log('作者是：' + this.author);
        };
        //返回新创建的对象
        return o;
}
//创建对象
var book1 = createBook();
var book2 = createBook();
cosnole.log(book1);
console.log(book2);
  • 封装
    把固定的部分提取写成函数的函数体，把变化的部分提取出来，作为函数传递
function createBook(name,author){
        var o = new Object();
        o.name = name;
        o.author = author;
        o.logDes = function(){
                  console.log('作者是：' + this.author);
        };
        return o;
}
 var book1 = createBook("小学数学","教育部");
    var book2 = createBook("高等数学","燕子");
    console.log(book1);
    console.log(book2);
  • 如果创建多个不同类型的对象，那么我们无法分辨
    function createPerson(name,age){
        var o = new Object();
        o.name = name;
        o.age = age;
        return o;
    }

    function createDog(name,age)
    {
        var o = new Object();
        o.name = name;
        o.age = age;
        return o;
    }

    //创建具体的对象
    var obj1 = createPerson("张三",88);
    var obj2 = createDog("物理韬韬",13);
    console.log(obj1);
    console.log(obj2);

    //typeof 判断类型
    console.log(typeof obj1);
    console.log(typeof obj2);

    console.log(obj1.constructor);  //Object
    console.log(obj2.constructor);  //Object

自定义构造函数方式创建对象

function createPerson(name,age){
        //原料：name + age + 空对象
        var o = new Object();
        //对原料进行加工
        o.name = name;
        o.age = age;
        //产品出厂
        return o;
}
    var p1 = createPerson("张三",20);
    var p2 = createPerson("张三",20);
    var p3 = createPerson("张三",20);
  • 自定义构造函数创建对象
  • 提供一个构造函数
  • 通过 this 指针来设置属性和方法
  • 通过 new 操作符创建对象
//提供一个构造函数
//构造函数简单介绍
//作用：对对象进行一些初始化的设置
//和普通函数的区别
//首字母大写
//调用方式不一样，配合 new 使用
function Person(name,age){
        //默认 创建对象
        // var o = new Object();
        //默认会赋值给 this
        //this = o;
        //通过 this 指针来设置属性和方法
        this.name = name;
        this.age = age;
        this.showName = function(){
                console.log(this.name);
        };
        this.showAge = function(){
                console.log(this.age);
        };
        //默认返回 
        //return this;
}
//使用 new 操作符来创建对象
var p1 = new Person('张三'，20);
var p2 = new Person('张老汉'，200);
console.log(p1);
console.log(p2);
  • 自定义构造函数方式创建对象内部的实现细节
  • 我们在使用 new 关键字调用构造函数的时候，内部默认会创建一个空的对象
  • 默认会把这个空的对象赋值给 this
  • 通过 this 来设置新对象的属性和方法
  • 在构造函数的最后，默认会把新创建的对象返回
  • 自定义构造函数和工厂函数对比
  • 函数的名称不一样，构造函数首字母大写
  • 自定义构造函数创建方式内部会自动的创建空对象并赋值给 this
  • 默认会自动返回新创建的对象
  • 返回值
  • 没有显示的 return , 默认会把新创建的对象返回
  • 先的执行了 return 语句，就得看具体的情况
    返回的是值类型，那么直接忽略该返回，把新创建的对象返回；
    返回的是引用类型的数据，会覆盖调新创建的对象，直接返回引用数据类型的值。
function Dog(name){
        this.name = name;
        //return 'demo';  忽略
        //return function(){}  覆盖
}
var dog = new Dog('阿黄');
console.log(dog);

构造函数注意事项1

  • 函数传值&对象类型&构造器属性
function Student(number,className,log){
        this.number = number;
        this.className = className;
        this.log = log;
}
var stu1 = new Student("201701","九阴真经修炼1班"，function(){
        console.log('学号：' + this.number);
})
var stu2 = new Student("201702","九阴真经修炼2班",function(){
        console.log("班级名称：" + this.className);
})
stu1.log();
stu2.log();
  • 对象的类型（判断）
  • 关键字 instanceOf 用来判断当前对象是否是某个类型的实例（检查某个对象是否是使用指定构造函数创建的）
  • 语法：对象 instanceOf 构造函数（类型）
function Person(){};
function Dog(){};
var p1 =new Person();
var dog1 = new Dog();

console.log(p1 instanceof Person);
console.log(p1 instanceof Dog);
console.log(dog1 instanceof Person);
console.log(dog1 instanceof Dog);
  • 构造器属性（获取）
  • 在所有的对象中，都拥有一个构造器属性：constructor
function Person(){};
function Dog(){};
var p1 = new Person();
var dog1 = new Dog();

console.log(p1.constructor);
console.log(dog1.constructor);

构造函数注意事项2

  • 函数调用& this
  • 函数调用
    new:创建对象，并在最后返回该对象
    构造函数：用于初始化对象
    以普通函数的方式来调用构造函数，那么内部的 this 指向的是 window
function Person(name){
        if(this instanceof Person){
                  this.name = name;
        }else{
                return new Person(name);
        }
}
var p1 = new Person('哔哩哔哩');
//构造函数本身是一个函数，在调用时可以直接调用
<del>var p2 = Person('哗啦哗啦');</del>//不要这么写
console.log(p2);   //undefined

构造函数方式创建对象存在的问题

  var showName = function(){
            console.log("姓名：");
    }

    function Person(name,age){
        this.name = name;
        this.age = age;
        this.showName = showName;
    }

    //创建对象
    var p1 = new Person("张小花",18);
    var p2 = new Person("张全蛋",99);
    p1.showName();
    p2.showName();

    //每创建一个对象，内部都会声明一个showName函数
    console.log(p1.showName == p2.showName);  //false

缺点

  • 把函数写在了外部，破坏封装性
  • 增加了一个全局变量
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • js十大设计模式
    工厂模式类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,377评论 2赞 17
  • js设计模式笔记
    单例模式 适用场景：可能会在场景中使用到对象，但只有一个实例，加载时并不主动创建，需要时才创建 最常见的单例模式，...
    Obeing阅读 6,357评论 1赞 10
  • javascript对象（上篇）
    var a = 1; console.log(typeof a);// 'number' var b = '1';...
    zdnexus阅读 2,669评论 0赞 0
  • JavaScript - 面向对象编程一
    开篇废话是一种情怀 在我们开始学习面向对象之前，首先得先想一个问题，那就是何为对象？ 在日常生活中我们有男朋友\女...
    西巴撸阅读 3,430评论 4赞 3
  • js面向对象
    title: js面向对象date: 2017年8月17日 18:58:05updated: 2017年8月27日...
    lu900618阅读 3,638评论 0赞 2