This article brings you an introduction to JavaScript prototypes and prototype chain methods (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. Question
How to accurately determine whether a variable is an array
Write an example of prototype chain inheritance
Other ways of inheritance implementation
es6 What is the underlying principle of inheritance
Describe the process of new an object
How to use the prototype chain in zepto and other source codes
2. Knowledge points
2.1 Constructor
Features: Starting with a capital letter
function Foo(name,age){
//var obj = {}
//this = {}
this.name = name;
this.age = age;
this.class = 'class1'
// return this
}
var f1 = new Foo('liming',19);Copy after login
Extension
var o = {} is the syntactic sugar of var o = new Object()
var a = [] is the syntactic sugar of var a = new Array()
function Foo(){} is equivalent to var Foo = new Function(){}
2.2 Prototype rules
Five rules:
1. All reference types (objects, arrays, functions) All have object characteristics, that is, attributes can be freely extended
2. All reference types (objects, arrays, functions) have a __proto__ (implicit prototype) attribute, which is an ordinary object
3. All functions have prototype (explicit prototype) attributes and are also ordinary objects
4. All reference types (objects, arrays, functions) __proto__ value points to the prototype of its constructor
5. When trying to get the attributes of an object, if the variable itself does not have this attribute, it will go to its __proto__ to find it
for (var key in object) {
//高级浏览器中已经屏蔽了来自原型的属性
//建议加上判断保证程序的健壮性
if (object.hasOwnProperty(key)) {
console.log(object[key]);
}
}Copy after login
2.3 Prototype chain
obj.__ proto . proto . proto __ ...
Object.prototype === null
instanceof is used for judgment Which constructor does the reference type belong to
obj instanceob Foo
Actual meaning: Determine whether Foo.prototype is on the prototype chain of obj
3. Question answer
3.1 How to accurately determine whether a variable is an array
arr instanceof Array
##3.2 Write an example of prototype chain inheritance
Encapsulate dom query
function Elem(id){
this.elem = document.getElementById(id);
};
Elem.prototype.html = function(val){
var elem = this.elem;
if (val) {
elem.innerHTML = val;
return this;
}else{
return elem.innerHTML;
}
}
Elem.prototype.on = function(type,fun){
var elem = this.elem;
elem.addEventListener(type,fun);
return this;
}
var p1 = new Elem('id1');
p1.html("test").on('click',function(){
console.log('点击');
})Copy after login
3.3 Other ways of inheritance implementation
3.3.1 Prototypal inheritance
var obj = {
0:'a',
1:'b',
arr:[1]
}
function Foo(arr2){
this.arr2 = [1]
}
Foo.prototype = obj;
var foo1 = new Foo();
var foo2 = new Foo();
foo1.arr.push(2);
foo1.arr2.push(2);
console.log(foo2.arr); //[1,2]
console.log(foo2.arr2); //[1]Copy after login
Advantages: Simple implementation
Disadvantages:
1. Unable to pass parameters to the parent class constructor
2. When new two objects are used at the same time, when a reference type attribute in the prototype of one object is changed, the attribute of the other object will also be modified. Because the reference properties from the prototype object are shared by all instances.
3.3.2 Structural inheritance
function Super(b){
this.b = b;
this.fun = function(){}
}
function Foo(a,b){
this.a = a;
Super.call(this,b);
}
var foo1 = new Foo(1,2);
console.log(foo1.b);Copy after login
Advantages: You can pass parameters to the parent class, and the subclass will not share the reference attributes of the parent class
Disadvantages: Function reuse cannot be achieved , each subclass has new fun, too many will affect performance, and the prototype object of the parent class cannot be inherited.
3.3.3 Combined inheritance
function Super(){
// 只在此处声明基本属性和引用属性
this.val = 1;
this.arr = [1];
}
// 在此处声明函数
Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};
//Super.prototype.fun3...
function Sub(){
Super.call(this); // 核心
// ...
}
Sub.prototype = new Super();Copy after login
Advantages: There is no problem of sharing reference attributes, parameters can be passed, and functions can be reused
Disadvantages: The attributes of the parent class will be instantiated Transformed twice, the real instance parent class cannot be obtained (it is impossible to distinguish whether the instance is created by the parent class or not)
Optimization:
function Super(b){
this.b = b;
this.fun = function(){}
}
Super.prototype.c = function(){console.log(1111)}
function Foo(a,b){
this.a = a;
Super.call(this,b);
}
Foo.prototype = Super.prototype;
//修复构造函数：
var foo1 = new Foo(1,2);Copy after login
Disadvantages: It is impossible to distinguish whether the instance is created by the parent class or not. Subclass creation
3.3.4 Parasitic combination inheritance
function Super(b){
this.b = b;
}
Super.prototype.c = function(){console.log(1111)}
function Foo(a,b){
this.a = a;
Super.call(this,b);
}
var f = new Function();
f.prototype = Super.prototype;
Foo.prototype = new f();
//等同于 Foo.prototype = Object.create(Super.prototype);
var foo1 = new Foo(1,2);Copy after login
Parasitize the prototype of the parent class, that is, wrap it into a prototype of an empty object, and then instantiate this object as a child Class peototype.
Disadvantages: It is impossible to distinguish whether an instance is created by a parent class or a subclass.
You can add the following code:
Foo.prototype.constructor = Foo
Copy after login
This solution cannot be used for the above combined optimization method , because the subclass and parent class refer to the same prototype object, modifications will be modified at the same time.
Summary:
Inheritance is mainly to realize the reuse of parent class methods and attributes by subclasses.
Reference properties from the prototype object are shared by all instances, so we want to avoid inheriting properties from the prototype.
You can inherit the attributes and methods of the parent class constructor through the call function in the constructor, but the instance instantiated in this way will store the parent class methods multiple times, which affects performance.
Through combined inheritance, we use call inheritance properties and the prototype inheritance method to solve the above two problems, but the object instantiated in this way will store two copies of the properties in the parent class constructor.
Constructing a new object using the prototype of the parent class as the prototype of the subclass solves the problem of multiple storage, so the final parasitic combination inheritance is the best inheritance method. Its disadvantage is that it is more troublesome to write. .
3.3.6 Inheritance implementation in node source code
function inherits(ctor, superCtor) {
ctor.super_ = superCtor;
ctor.prototype = Object.create(superCtor.prototype, {
constructor: {
value: ctor,
enumerable: false,
writable: true,
configurable: true
}
});
};
function Stream(){
//...
}
function OutgoingMessage() {
Stream.call(this);
//...
}
inherits(OutgoingMessage, Stream);
OutgoingMessage.prototype.setTimeout = ...Copy after login
The above is an example of parasitic combination inheritance.
1. Inherit the properties in the Stream constructor by calling in the OutgoingMessage constructor.
2. Call the inherits method to inherit the properties in the Stream prototype.
3. Function that extends OutgoingMessage’s own prototype.
The Object.create method is used in the inherits method. The function of this method is to create a new object through the specified prototype object and properties.
ctor.prototype=Object.create(superCtor.prototype,{.....});Copy after login
This method actually does the work of our parasitic combination inheritance above
var f = new Function();
f.prototype =superCtor.prototype;
return new f();
Copy after login
The following parameters are to add attributes to the prototype object, optional attributes (not required), that is, put Serves itself as the constructor of a newly created object.
value: 表示constructor 的属性值；
writable: 表示constructor 的属性值是否可写；[默认为: false]
enumerable: 表示属性constructor 是否可以被枚举；[默认为: false]
configurable: 表示属性constructor 是否可以被配置，例如 对obj.a做 delete操作是否允许；[默认为: false]
Copy after login
3.4 How to implement es6 inheritance
Refer to my article: https://segmentfault.com/a/11...
3.5 描述new一个对象的过程
创建一个对象
{}._proto_ = 构造函数.prototype
this指向这个对象
执行代码即对this赋值
返回this
3.6 zepto及其他源码中如何使用原型链
var Zepto = (function(){
var $,zepto = {}
// ...省略N行代码...
$ = function(selector, context){
return zepto.init(selector, context)
}
zepto.init = function(selector, context) {
var dom
// 针对参数情况，分别对dom赋值
// 最终调用 zepto.Z 返回的数据
return zepto.Z(dom, selector)
}
fnction Z(dom, selector) {
var i, len = dom ? dom.length : 0
for (i = 0; i < len; i++) this[i] = dom[i]
this.length = len
this.selector = selector || ''
}
zepto.Z = function(dom, selector) {
return new Z(dom, selector)
}
$.fn = {
// 里面有若干个工具函数
}
zepto.Z.prototype = Z.prototype = $.fn
// ...省略N行代码...
return $
})()
window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)Copy after login
The above is the detailed content of Introduction to JavaScript prototypes and prototype chain methods (code examples). For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
