6.30 js学习笔记

本文主要是介绍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];}}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() //26person1.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-12person1.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,遍历完整条原型链都没有找到，返回falsereturn false;if (O === A)   //找到了返回truereturn 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=namethis.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方法。

这篇关于6.30 js学习笔记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！