js之原型对象(es5构造函数和es6类继承)

   日期:2020-11-07     浏览:104    评论:0    
核心提示:普通函数:默认没有返回值this指向window构造函数默认返回这个对象this指向对象使用this给对象绑定属性默认返回这个空对象let Two = function () { //空函数 //1.{} //2.将构造函数this--->{} //3.使用this给空对象绑定属性 {} //4.隐式返回{} }原型链话不多说 码上去

普通函数:

  1. 默认没有返回值
  2. this指向window

构造函数

  1. 默认返回这个对象
  2. this指向对象
  3. 使用this给对象绑定属性
  4. 默认返回这个空对象
let Two = function () { 
            //空函数
            //1.{}
            //2.将构造函数this--->{}
            //3.使用this给空对象绑定属性 {}
            //4.隐式返回{}
        }

原型链
话不多说 码上去
这里写了一个构造函数,两个属性name和age,一个方法eat,使用this添加属性和方法。

let One = function (name, age) { 
            this.name = name;
            this.age = age
            this.eat = function () { 
                console.log(this.name + '爱吃排骨,并且年龄' + this.age + '了。')
            }
        }

实例化One这个构造函数,OneFunObj 这个实例化对象就拥有了One的属性和方法,并赋值name=胡歌;age=18,还拥有eat这个方法。直接OneFunObj 这个对象点属性或者方法就可以使用。

let OneFunObj = new One('胡歌', 18)
  console.log(OneFunObj.name) //胡歌
  console.log(OneFunObj.age) //18
  OneFunObj.eat() //胡歌爱吃排骨,并且年龄18了。

我们发现OneFunObj 是个对象,这个对相还有个属性__proto__,我们知道每一个对象都会默认有一个__proto__,我们随便Let一个obj都会有一个__proto__属性。

console.log(OneFunObj.__proto__, 'OneFunObj')
console.log(One.prototype, 'One')
console.log(OneFunObj.__proto__ === One.prototype)

不难发现,上面执行结果

惊奇的发现这个实例化对象OneFunObj它的__proto__正好是One这个构造函数的prototype。它两个是完全相等的,并且构造函数的prototype中有属性constructor所对应的正好的该构造函数。
说明

实例对象.proto == 构造函数.prototype == 原型对象


类本身也是构造函数,也类似于构造函数的语法糖。
它是ES6中新增的一个关键字(语法糖), 用于定义一个类的, 类似于ES5中的构造函数, class中可以声明构造函数, 属性和方法, 像一套模板, class的绝大部分功能,ES5 都可以做到,新的 class 写法, 只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

基础使用

class Person { 
	constructor() {  // 构造函数
		this.name = ""; // 属性
		this.age = 0;
	}
	play () {  // 方法 (会自动帮你添加到原型上)
		console.log("我会玩");
	}
}
let stu = new Person();
console.log(stu);

constructor

它是class定义类时, 使用的构造函数(固定名称), 当new 类()的时候, 构造函数就会触发. (起到一个初始化实例对象的作用)

有参数的构造方法 / 无参数的构造方法, 影响new 时传值和构造函数中使用。
Person的方法play会自动添加到stu的原型上。

 		class zjq { 
            constructor(name, age) { 
                this.name = name
                this.age = age
            }
            eat() { 
                console.log(this.name + '今年' + this.age)
            }
        }
         class xiaobai extends zjq {  //xiaobai继承zjq
            constructor(name, age) { 
                super(name, age)
            }
        }
console.log(xiaobai.prototype.__proto__ == zjq.prototype) //true
 		let obj = new xiaobai('zjq', 18)
        console.log(obj)
        obj.eat() //zjq今年18

xiaobai继承zjq,zjq的属性方法会继承到xiaobai的prototype上,obj这个实例对象就拥有了原型链上的方法。
他们的关系是

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服