6.30 js学习笔记

最新推荐文章于 2024-06-29 23:47:29 发布

Shelysure

最新推荐文章于 2024-06-29 23:47:29 发布

阅读量140

点赞数

文章标签： js

本文链接：https://blog.csdn.net/Shelysure/article/details/107047612

版权

继：

多继承

      //多继承
        function muliExtend() {
            var n={},stuff,j=0,len=arguments.length;
            for(j=0;j<len;j++){
                stuff=arguments[j];
                for(var i in stuff){
                    n[i]=stuff[i];
                }
            }
            return n;
        }
        var Shape={
            name:'shape',
            toString:function () {
                return this.name;
            }
        };
        var TwoDShape={
            name:'2d',
            test:'this is '
        };
        var Triangle=muliExtend(Shape,TwoDShape,{
            name:'triangle',
            getArea:function () {
                return this.side*this.height/2;
            },
            side:5,
            height:10
        });
        console.log(Triangle.getArea());
        console.log(Triangle.test);
        console.log(Triangle.toString());

结果：
在这里插入图片描述

继承小结

1.原型链继承

缺点 1)、数据共享问题引用类型数据实例之间相互影响 2).创建子类型实例时没办法向超类传递参数 3.只能单继承( 只能继承一个父类)

function SuperType() {
      this.name = '张三';
      this.like = ['food', 'cake'];
    }
    SuperType.prototype.sayName = function () {
      console.log(this.name)
    }
    function SubType() {
      this.age = '26';
    }
    SubType.prototype = new SuperType();
    SubType.prototype.sayAge = function () {
      console.log(this.age)
    }
    let person1 = new SubType();
    let person2 = new SubType();
    person1.sayAge() //26
    person1.sayName() // 张三
    person1.like.push('flower')
    console.log(person1.like) // ["food", "cake", "flower"]
    console.log(person2.like) // ["food", "cake", "flower"]

2.构造函数继承

优点：解决原型链继承引用类型数据共享和没办法传递参数问题；可以多继承。缺点：方法多次重复定义

 function SuperType(name) {
      this.name = name;
      this.like = ['food', 'cake'];
      this.sayName = function () {
        console.log(this.name)
      }
    }
    function SuperType2(date) {
      this.birthday = date;
      this.sayDate = function () {
        console.log(this.birthday)
      }
    }
    function SubType(name, age, date) {
      //多继承
      SuperType.call(this, name);
      SuperType2.call(this, date)
      this.age = age;
      this.sayAge = function () {
        console.log(this.age)
      }
    }
    let person1 = new SubType('张三', 26, '2013-12');
    let person2 = new SubType('李四', 28, '2013-11');
    person1.sayName() // 张三
    person2.sayName() // 李四
    person1.sayDate() //2013-12
    person1.like.push('flower')
    console.log(person1.like) // ["food", "cake", "flower"]
    console.log(person2.like) // ["food", "cake"]

3.组合继承（原型链 + 构造函数）

优点：避免了原型链和构造函数的缺陷，能实现函数复用，每个实例也都有自己的属性。缺点：超类构造函数执行了两次

function SuperType(name, like) {
      this.name = name;
      this.like = like
    }
    SuperType.prototype.sayName = function () {
      console.log(this.name)
    }
    function SubType(name, age, like) {
      SuperType.call(this, name, like)
      this.age = age;
    }
    SubType.prototype = new SuperType();
    SubType.prototype.sayAge = function () {
      console.log(this.age)
    }
    let person1 = new SubType('张三', '28', ['food', 'cake']);
    let person2 = new SubType('李四', '28', ['food', 'cake']);
    person1.sayName() //张三
    person2.sayName() //李四
    person1.like.push('flower');
    console.log(person1.like) // ["food", "cake", "flower"]
    console.log(person2.like) // ["food", "cake"]

4.寄生组合式

优点：解决超类构造函数调用两次问题。我们只需要让子类能访问到超类的原型的就可以。

//其他地方和组合继承一致
SubType.prototype = Object.create(SuperType.prototype)
 
//Object.create 传一个参数时和如下object函数行为一致
function object(obj) {
  function F() { }
  F.prototype = obj;
  return new F()
}

但为什么不直接让子类原型等于超类原型呢？

//这样不是更省事吗？
 SubType.prototype = SuperType.prototype
 
//这样如果在SubType原型上添加属性 SuperType原型上也会影响到
//如
 SubType.prototype.sayAge = function () {
      console.log(this.age)
    }
//SuperType.prototype 也会存在sayAge方法

5.ES6继承

ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。
ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），
然后再用子类的构造函数修改this。                         —— 《ECMAScript 6入门》阮一峰

class A {
  p() {
    return 2;
  }
}
 
class B extends A {
  constructor() {
    //作为函数调用 代表父类构造函数
    super();
    //作为对象调用 指向父类原型对象
    console.log(super.p()); // 2
  }
}

instanceOf

在理解instanceof之前，必须熟悉理解原型链中的prototype与__proto__

每个函数都有 prototype 属性，除了 Function.prototype.bind()，该属性指向原型。

每个对象都有 proto 属性，指向了创建该对象的构造函数的原型。其实这个属性指向了 [[prototype]]，但是 [[prototype]] 是内部属性，我们并不能访问到，所以使用 proto 来访问。

对象可以通过 proto 来寻找不属于该对象的属性，proto 将对象连接起来组成了原型链。

在这里插入图片描述

instanceof运算符是用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上

语法： object instanceof constructor

参数： object（要检测的对象，如果不是对象，直接返回false）constructor（某个构造函数）
描述： instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

let num=1;     //非对象
console.log(num instanceof Number); //false
num =new Number(1);
console.log(num instanceof Number); //true

实例：

1、普通用法，obj instanceof Object 检测Object.prototype是否存在于参数obj的原型链上。

function Person(){} 
var p = new Person(); 
//p.__proto__==Person.prototype
console.log(p instanceof Person);  //true
//Person.prototype.__proto__==Object.prototype
//p.__proto__.__proto__==Object.prototype
console.log(p instanceof Object);  //true

2、在继承关系中用来判断一个实例是否属于它的父类

function Father(){};
function Child(){};
var f =new Father();
Child.prototype=f;      //继承原型
var c=new Child();
console.log(c instanceof Child);//true
//c.__proto__==Child.prototype==f
//c.__proto__.__proto__==f.__proto_==Father.prototype
console.log(c instanceof Father);//true

也可以这样理解：

function _instanceof(A, B) {
    var O = B.prototype;// 取B的显示原型
    A = A.__proto__;// 取A的隐式原型
    while (true) {
        if (A === null) 
 //Object.prototype.__proto__ === null,遍历完整条原型链都没有找到，返回false
            return false;
        if (O === A)   //找到了返回true
            return true;
        A = A.__proto__; //继续往隐式原型走，直到遍历完整条原型链
    }
}

在理解以上代码后可以看一下下面的例子：

console.log(Object instanceof Object);//true 
//第一个Object的原型链：
//Object.__proto__ => Function.prototype=>Function.prototype.__proto__=>Object.prototype
//第二个Object的原型：
//Object=> Object.prototype
console.log(Function instanceof Function);//true 
//第一个Function的原型链：
//Function=>Function.__proto__ => Function.prototype
//第二个Function的原型：
//Function=>Function.prototype
console.log(Number instanceof Number);//false 
//第一个Number的原型链：
//Number=>Number.__proto__=>Function.prototype=>Function.prototype.__proto__=>Object.prototype
//第二个Number的原型链：String=>String.prototype
console.log(String instanceof String);//false  
//第一个String的原型链：
//String=>String.__proto__=>Function.prototype=>Function.prototype.__proto__=>Object.prototype
//第二个String的原型链：String=>String.prototype
console.log(Function instanceof Object);//true  
//第一个Function的原型链：
//Function.__proto__=>Function.prototype=>Function.prototype.__proto__=>Object.prototype
//第二个Object的原型：
//Object=> Object.prototype

类的继承

四部曲

<script>

1）创建父类

 

function Person(){

 }
Person.prototype.age = 18;//给父类添加属性
var p1 = new Person();//给父类添加方法

 

2）创建子类

 

function Child(){

}

 

3）确定继承关系

 

Child.prototype = Object.create(Person.prototype);
Child.prototype.stuno = "2000";

 

4）改造构造器（不是很重要）

</script>

实例：

 <script>
        //父类
  function Person() {

  }
  Person.prototype.headCount =1;
  Person.prototype.eat=function () {
      console.log("eating...");
  };
  //子类
    function Programmer() {

    }

    Programmer.prototype=Object.create(Person.prototype);//实现继承
    Programmer.prototype.constructor=Programmer;

        Programmer.prototype.language ="java";
        Programmer.prototype.work = function () {
            console.log("i am writing" +this.language);
        }

    </script>

结果：

在这里插入图片描述

稍作修改：

  <script>
        //父类
  function Person(name,age) {
        this.name=name;
        this.age=age;
  }
  Person.prototype.headCount =1;
  Person.prototype.eat=function () {
      console.log("eating...");
  };
  //子类
    function Programmer(name,age,title) {
    Person.apply(this,arguments);

    }//当成构造器

    // Programmer.prototype=Object.create(Person.prototype);//实现继承
    // Programmer.prototype.constructor=Programmer;
    createEx(Programmer,Person);

        Programmer.prototype.language ="java";
        Programmer.prototype.work = function () {
            console.log("i am writing" +this.language);
            Programmer.base.eat();
        }

        
        function createEx(Child,Parent) {
            function F() {  };
                F.prototype=Parent.prototype;
                Child.prototype=new F();
                Child.prototype.constructor=Child;
                Child.super =Child.base=Parent.prototype;

        }


    </script>

结果：
在这里插入图片描述

在这里插入图片描述
我们先看看不用class实现的继承

function animal(){
	this.a=1;
}
animal.prototype.dw=function(){
	console.log("动物的原型方法")
}
function Dog(){
	this.b=2;
}
Dog.prototype.sy=function(){
	console.log("sy")
}
Dog.prototype=new animal()//1.这句话把Dog的原型指向了animal
var hashiqi=new Dog();
hashiqi.dw();//2.Dog的实例对象hashiqi便有了动物的原型方法dw
hashiqi.sy();//3.Dog的实例对象hashiqi便失去了构造函数原有的原型方法sy
console.log(hashiqi.a);//4.Dog的实例对象hashiqi便有了动物的所有属性,如上面的a
console.log(hashiqi.b);//5.Dog的实例对象hashiqi构造函数的属性未失去,如上面的bark
console.dir(hashiqi)

很简单通过修改原型指向实现了继承当然还有其他方法比如call和apply

接下来我们看看class实现的继承语法

class Animal{
	constructor(name) {
	    this.name=name
	}
	eat(){
		console.log(`${this.name}`);
	}
}
class Dog extends Animal{
	constructor(name,age){
		super(name)
		//但凡看到extends继承那这句就固定加上super
		//相当于es5中Animal.call(this,name)
		//super()负责初始化this.相当于ES5中的call和apply方法。
		this.name=name
		this.age=age
	}
	say(){
		console.log(`${this.name}=>${this.age}`)
	}
}
var dog=new Dog("cxk",12);
dog.say()
dog.eat()

ES5中，我们通过在继承的函数中调用call()或者apply()方法实现继承。
但凡看到extends继承那这句就固定加上super
在es5中我们用被继承的函数名.call(this,参数,…参数) 来修改this的指向
那么这里的super()负责初始化this.就相当于ES5中的call和apply方法。

Shelysure

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.30 js学习笔记

继：多继承 //多继承 function muliExtend() { var n={},stuff,j=0,len=arguments.length; for(j=0;j<len;j++){ stuff=arguments[j]; for(var i in stuff){ n[i]=stuff[i];
复制链接

扫一扫