美文网首页
2017-03-24 面向对象预习笔记 2

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

作者: GodlinE | 来源:发表于2017-03-24 18:54 被阅读0次

    面向对象的三大特性

    • 封装、继承、多态
    • 封装
    • 作用：方便代码的维护，提高代码的复用性，更虐泉的访问数据的方式
    • 注意：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

    缺点

    • 把函数写在了外部，破坏封装性
    • 增加了一个全局变量

    相关文章

      网友评论

          本文标题：2017-03-24 面向对象预习笔记 2

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

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|2017-03-24 面向对象预习笔记 2|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！