Shulou(Shulou.com)06/01 Report--

This article "JavaScript object-oriented encapsulation and inheritance how to achieve" most people do not understand, so the editor summed up the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "JavaScript object-oriented encapsulation and inheritance how to achieve" article.

1. Object oriented

[three significant features]: encapsulation, inheritance, polymorphism

1. Encapsulation

[explanation]: the essence of encapsulation is to combine related code together.

[advantages]:

Ensure that the code can be reused to improve the maintenance efficiency of the code

[previous encapsulation method]:

Function encapsulation

Function fn () {}

Namespace encapsulation

Let o = {name:'zhangsan',age:20} let obj= {name:'lisi',age:18}

[new packaging method]:

Constructor function

/ / Custom constructor function Person (name,age,height,weight) {this.name=name; this.age=age; this.height=height; this.weight=weight / / method this.eat=function () {console.log ('eat')} this.sleep=function () {console.log ('sleep')} / / instantiate an object let obj1=new Person ('zhangsan',20,'198cm','60kg') console.log (obj1) let obj2=new Person (' lisi',24,'168cm','70kg') console.log (obj2)

[summary]:

The constructor embodies the object-oriented encapsulation feature. the objects created by the constructor instance are independent of each other and do not affect each other. The namespace encapsulation cannot guarantee the independence of the data.

2. Prototype object

[explanation]: the essence is an attribute of the constructor, and the prototype is the object class type, which is called the prototype object of the constructor.

[code example]:

Function Person (name,age) {this.name=name this.age=age / / this.sing=function () {/ / console.log ('singing') / /}} console.log (Person.prototype); Person.prototype.sing=function () {console.log ('singing')} let p1=new Person ('zhangsan',20); console.log (p1) p1.sing ()

[summary]:

As long as it is a constructor, there is a prototype object.

The method in the prototype object, which can be called directly by the instance object

Use the method of the constructor itself when both the prototype object and the constructor have the same method

[constructor attribute]: represents the constructor corresponding to the prototype object.

[example]:

Function Person (name,age) {this.name=name this.age=age} console.log (Person.prototype,constructor)

[illustration]:

[_ _ proto__ property]: used to point to the prototype object

[example]:

Function Person (name,age) {this.name=name this,age=age} Person.prototype.eat=function () {console.log ('eat')} let person1=new Person ('Zhang San', 22); console.log (person.__proto__===Person.prototype) 3, inheritance

[encapsulation problem]:

/ / encapsulate Chinese behavioral characteristics function Chinese () {/ / Chinese characteristics this.arms = 2; this.legs = 2; this.eyes = 2; this.skin = 'yellow'; this.language =' Chinese' / / Chinese behavior this.walk = function () {} this.sing = function () {} this.sleep = function () {}} / / encapsulates Japanese behavior characteristics function Japanese () {/ / Japanese characteristics this.arms = 2; this.legs = 2; this.eyes = 2; this.skin = 'yellow'; this.language =' Japanese' / / Japanese behavior this.walk = function () {} this.sing = function () {} this.sleep = function () {}}

[summary]: in fact, we all know that most of the characteristics of people, whether they are Chinese, Japanese or other ethnic groups, are the same. however, the same behavioral characteristics of people are repeatedly written many times in the code, and the code is very redundant. We can extract the repeated code.

[code rewriting]:

/ / owner function Person () {/ / Human characteristics this.arms = 2; this.legs = 2; this.eyes = 2 / / Human behavior this.walk = function () {} this.sing = function () {} this.sleep = function () {}} / / encapsulates Chinese behavioral characteristics function Chinese () {/ / Chinese characteristics this.skin = 'yellow'; this.language =' Chinese' } / / encapsulate Japanese behavioral characteristics function Japanese () {/ / Japanese characteristics this.skin = 'yellow'; this.language =' Japanese';} / / human is an instance of the constructor Person let human = new Person (); / / Chinese Chinese.prototype = new Person (); Chinese.prototype.constructor = Chinese; / / Japanese Japanese.prototype = human; Japanese.prototype.constructor = Japanese The above is about the content of this article on "how to achieve encapsulation and inheritance in JavaScript object-oriented". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.