菜单

初探JavaScript 面向对象(推荐)

2019年6月8日 - jQuery

类的注解

初探JavaScript 面向对象(推荐),初探javascript

类的宣示

一. 构造函数

function Animal() {
 this.name = 'name'
}
// 实例化
new Animal()

2. ES6 class

class Animal {
 constructor() {
  this.name = 'name'
 }
}
// 实例化
new Animal()

类的继续

1. 重视构造函数完成持续

原理:退换子类运维时的 this
指向,可是父类原型链上的属性并未被一而再,是不完全的接轨

function Parent() {
 this.name = 'Parent'
}
Parent.prototype.say = function(){
 console.log('hello')
}
function Child() {
 Parent.call(this)
 this.type = 'Child'
}
console.log(new Parent())
console.log(new Child())

二. 依附原型链完结再而三

原理:原型链,不过在多少个子类实例中改造了父类中的属性,其余实例中的该属性也会改换子,也是不完全的持续

function Parent() {
 this.name = 'Parent'
 this.arr = [1, 2, 3]
}
Parent.prototype.say = function(){
 console.log('hello')
}
function Child() {
 this.type = 'Child'
}
Child.prototype = new Parent()
let s1 = new Child()
let s2 = new Child()
s1.arr.push(4)
console.log(s1.arr, s2.arr)
console.log(new Parent())
console.log(new Child())
console.log(new Child().say())

3. 构造函数 + 原型链

一级实行

// 父类
function Parent() {
 this.name = 'Parent'
 this.arr = [1, 2, 3]
}
Parent.prototype.say = function(){
 console.log('hello')
}
// 子类
function Child() {
 Parent.call(this)
 this.type = 'Child'
}
// 避免父级的构造函数执行两次,共用一个 constructor
// 但是无法区分实例属于哪个构造函数
// Child.prototype = Parent.prototype
// 改进:创建一个中间对象,再修改子类的 constructor
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child
// 实例化
let s1 = new Child()
let s2 = new Child()
let s3 = new Parent()
s1.arr.push(4)
console.log(s1.arr, s2.arr) // [1, 2, 3, 4] [1, 2, 3]
console.log(s2.constructor) // Child
console.log(s3.constructor) // Parent
console.log(new Parent())
console.log(new Child())
console.log(new Child().say())

总结

以上所述是笔者给我们介绍的JavaScript
面向对象(推荐)的连锁知识,希望对大家享有扶助,假使我们有别的难题迎接给自己留言,我会及时还原大家的!

http://www.bkjia.com/Javascript/1225693.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1225693.htmlTechArticle初探JavaScript 面向对象(推荐),初探javascript
类的宣示 一. 构造函数 function Animal() { this.name = ‘name’}// 实例化new
Animal() 2. ES陆 class class Animal { co…

一. 构造函数

function Animal() {
 this.name = 'name'
}
// 实例化
new Animal()

2. ES6 class

class Animal {
 constructor() {
  this.name = 'name'
 }
}
// 实例化
new Animal()

类的存续

一. 依附构造函数达成三番五次

规律:改造子类运转时的 this
指向,不过父类原型链上的天性并从未被一而再,是不完全的持续

function Parent() {
 this.name = 'Parent'
}
Parent.prototype.say = function(){
 console.log('hello')
}
function Child() {
 Parent.call(this)
 this.type = 'Child'
}
console.log(new Parent())
console.log(new Child())

二. 借助原型链实现持续

原理:原型链,可是在一个子类实例中改动了父类中的属性,别的实例中的该属性也会改换子,也是不完全的承接

function Parent() {
 this.name = 'Parent'
 this.arr = [1, 2, 3]
}
Parent.prototype.say = function(){
 console.log('hello')
}
function Child() {
 this.type = 'Child'
}
Child.prototype = new Parent()
let s1 = new Child()
let s2 = new Child()
s1.arr.push(4)
console.log(s1.arr, s2.arr)
console.log(new Parent())
console.log(new Child())
console.log(new Child().say())

三. 构造函数 + 原型链

顶级施行

// 父类
function Parent() {
 this.name = 'Parent'
 this.arr = [1, 2, 3]
}
Parent.prototype.say = function(){
 console.log('hello')
}
// 子类
function Child() {
 Parent.call(this)
 this.type = 'Child'
}
// 避免父级的构造函数执行两次,共用一个 constructor
// 但是无法区分实例属于哪个构造函数
// Child.prototype = Parent.prototype
// 改进:创建一个中间对象,再修改子类的 constructor
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child
// 实例化
let s1 = new Child()
let s2 = new Child()
let s3 = new Parent()
s1.arr.push(4)
console.log(s1.arr, s2.arr) // [1, 2, 3, 4] [1, 2, 3]
console.log(s2.constructor) // Child
console.log(s3.constructor) // Parent
console.log(new Parent())
console.log(new Child())
console.log(new Child().say())

总结

上述所述是笔者给大家介绍的JavaScript
面向对象(推荐)的连锁知识,希望对大家具备扶助,假若大家有别的疑窦应接给自家留言,作者会及时回复大家的!

您只怕感兴趣的小说:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图