第9天：原型、继承、函数使用推荐以及this的指向

时间  2019-12-08
标签 9天 原型 继承 函数 使用 推荐 以及 指向 栏目 软件设计 繁體版
原文   原文链接

原型

javascript原型指向改变如何添加方法和访问

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //构造函数
     function Person(age){
         this.age = age;
     }
     //构造函数
     function Student(){
         this.sayHi = function(){
             alert("1");
             console.log("学生");
         }
         this.name = "名字";
     }
     //实例对象改变原型指向
     Student.prototype = new Person(10);
     //实例化
     var stu = new Student();
     //没有返回的值  为undefined
     //在调用sayHi()的时候，执行了sayHi()的函数代码
      console.log(stu.sayHi());
      //要想改变原型后而且调用添加的方法,要在改变指向以后再添加
      Student.prototype.sayHell = function(){
         console.log("说hello");
     }
      stu.sayHell();
    </script>
</head>
<body>
</body>
</html>

继承

面向对象的特性：封装、继承、多态、（若是是变成语言还有抽象性）;
|继承，类与类之间的关系，面向对象的语言的继承是为了多态服务的
js不是面向对象的语言，可是能够模拟面向对象，模拟继承，为了节省内存空间
继承：
原型的做用：数据共享、继承；目的是：为了节省内存空间；
有几种方式实现：javascript

  1. 原型继承:改变原型的指向；
  2. 借用构造函数继承：主要解决属性的问题（原型继承时，初始化对象数据固定(s属性)）
  3. 组合继承：原型继承+借用构造函数
    既然解决属性的问题，又能解决方法问题

  4. 拷贝继承：就是把对象中须要共享给的属性或者方法，直接遍历的方式复制到另一个对象中html

    继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    //声明构造函数
    function Person(name,age,sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    //经过原型添加方法
    Person.prototype.play=function(){
        console.log("人能够玩");
    }
    Person.prototype.eat = function(){
        console.log("人能够吃东西");
    }
    Person.prototype.sleep = function(){
        console.log("人能够睡觉");
    }
    //声明构造函数
    function Student(scote){
        this.scote = scote;
    }
    //经过原型改变指向,并实例化对象
    Student.prototype = new Person("小红",18,"女");
    Student.prototype.study = function(){
        console.log("须要学习啊");
    }
    //实例化对象
    var stu = new Student(100);
    console.log("继承共同属性");
    console.log(stu.name);
    console.log(stu.age);
    console.log(stu.sex);
    stu.play();
    stu.eat();
    stu.sleep();
    console.log("属性student的属性")
    stu.study();
   
    </script>
</head>
<body>
    
</body>
</html>

继承的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    //声明动物的构造函数
    function Animal(name,weight){
        this.name = name;
        this.weight = weight;
    }
    //动物的原型的方法
    Animal.prototype.eat = function(){
        console.log("会吃东西");
    }
    //声明Dog的构造函数
    function Dog(furColor){
        this.furColor = furColor;
    }
    //改变原型指向，实例化对象,实现继承
    Dog.prototype= new Animal("哮天犬","20kg");
    Dog.prototype.bite = function(){
        console.log("会咬人");
    }
    //声明二哈的构造函数
    function Erha(sex){
        this.sex = sex;
    }
    //g改变原型指向，实例化对象，实现继承
    Erha.prototype = new Dog("黑白色");
    Erha.prototype.takeDown = function(){
        console.log("哼哼~~~~~~~~~~哈哈，，，拆家");
    }
    //实例化对象
    var erHa = new Erha("雄性");
    console.log(erHa.name,erHa.weight,erHa.furColor,erHa.sex);
    erHa.eat();
    erHa.bite();
    erHa.takeDown();
    </script>
</head>
<body>
    
</body>
</html>

借用构造函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    //构造函数Person
    function Person(name,age,sex){
        this.name = name;
        this.age= age;
        this.sex = sex;
    }
    //经过原型添加方法
    Person.prototype.say=function(){
        console.log("你好");
    }
    //构造函数Student
    function Student(name,age,sex,score){
        //借用构造函数
        Person.call(this,name,age,sex);
        this.score=score;
    }
    var stu = new Student("小明","18","男",100);
    console.log(stu.name,stu.age,stu.sex,stu.score);
    </script>
</head>
<body>
    
</body>
</html>

组合继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    /*
    原型实现继承
    借用构造函数实现继承
    组合继承：原型继承+借用构造函数竭诚
    
    */
    //Person构造函数
    function Person(name,age,sex){
        this.name = name;
        this.age = age;
        this.sex= sex;
    }
    //原型添加方法
    Person.prototype.sayHi=function(){
        console.log("你好");
    }
    //Student构造函数
    function Student(name,age,sex,score){
        //借用构造函数
        //能够继承属性，可是不能继承方法
        Person.call(this,name,age,sex)
        this.score = score;
    }
    //经过原型对象改变指向，实现方法的继承
    Student.prototype = new Person();
    //验证
    var stu1 = new Student("小明","18","男",100);
    var stu2 = new Student("大明","88","女",90);
    console.log(stu1.name,stu1.age,stu1.sex,stu1.score);
    console.log(stu2.name,stu2.age,stu2.sex,stu2.score);
    
    </script>
</head>
<body>
    
</body>
</html>

拷贝继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    function Person(){

    }
    Person.prototype.name = "小明";
    Person.prototype.age = 18;
    Person.prototype.sayHi = function(){
        console.log("你好");
    }
    //声明空对象
    var obj = {};
    //用for..in循环复制Person的prototype
    for(var key in Person.prototype){
        obj[key]=Person.prototype[key];
    }
    console.dir(obj);
    </script>
</head>
<body>
    
</body>
</html>

函数声明和函数表达式的区别

  1. 若是之后写函数，最好使用函数表达式，避免出错
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    
    //函数的声明若是放在if-else的语句中，
    //在IE8的浏览器中会出现问题（建议使用函数表达式）
    if(true){
        function f1(){
            console.log("执行true的");
        }
    }else{
        function f1(){
            console.log("执行else的");
        }
    }
    f1();
    //测试IE 兼容方式
    //最好的方式
    //若是之后写函数，最好使用函数表达式，避免出错
    if(true){
        ff= function f1(){
            console.log("执行true的");
        };
    }
    else{
        ff= function f1(){
            console.log("执行else的");
        };
    }
    ff();
    </script>
</head>
<body>
    
</body>
</html>

关于this指向

普通函数中的this是谁----window
对象.方法中的this是谁————当前的实例对象
定时器方法中的this是谁————window
构造函数中的this是————实例对象
原型对象方法中的this是——实例对象
全部的函数实际上都是Function的构造函数建立出来的对象
var num = new Function("num1","num","return num1+ num2");java

"use strict";//严格模式
    function f1(){
        console.log(this);//window
    }
    window.f1();
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程