この記事では、オブジェクト指向、コンストラクター、継承に関する問題など、JavaScript のオブジェクト指向に関する関連知識を提供します。皆様のお役に立てれば幸いです。
オブジェクト指向は私たちの実際の生活に近いものであり、オブジェクト指向は次のような用途に使用できます。現実世界の物事を記述しますが、物事は具体的なものと抽象的なものに分けられます
オブジェクト指向思考の特徴:
JavaScript では、オブジェクトは、関連するプロパティとメソッドの順序のないセットであり、文字列、値、配列、関数など、すべてのものはオブジェクトです。
オブジェクトはプロパティとメソッド
class name { // class body}
var XX = new name();
#1.2.2、コンストラクター## をインスタンス化する必要があります。
最後に、構文の仕様に注意してください
インスタンスを生成します➡クラス名の後に括弧を付けますclass Person { constructor(name,age) { // constructor 称为构造器或者构造函数 this.name = name; this.age = age; } say() { console.log(this.name + '你好'); }} var ldh = new Person('刘德华', 18); ldh.say()
constructor
関数の
// 父类class Father { }// 子类继承父类class Son extends Father { }
例を見てみましょう:
#1.4.1. 親クラスのコンストラクターを呼び出す
構文:// 父类class Person { constructor(surname){ this.surname = surname; }}// 子类继承父类class Student entends Person { constructor(surname,firstname) { super(surname); //调用父类的 constructor(surname) this.firstname = firstname; //定义子类独有的属性 }}
// 父类class Father { constructor(surname){ this.surname = surname; } saySurname() { console.log('我的姓是' + this.surname); }}// 子类继承父类class Son entends Father { constructor(surname,firstname) { super(surname); //调用父类的 constructor(surname) this.firstname = firstname; //定义子类独有的属性 } sayFirstname() { console.log('我的名字是:' + this.firstname); }}var damao = new Son('刘','德华');damao.saySurname();damao.sayFirstname();
1.4.2。親クラスの通常の関数を呼び出します
文法:class Father { say() { return '我是爸爸'; }}class Son extends Father { say(){ // super.say() super调用父类的方法 return super.say() + '的儿子'; }}var damao = new Son();console.log(damao.say());
1.4. 3注意点
メソッド内の ## を指します。 #this
このメソッドの呼び出し元を指します
在 ES6之前 ,对象不是基于类创建的,而是用一种称为构建函数的特殊函数来定义对象和它们的特征。
// 1. 利用 new Object() 创建对象var obj1 = new Object();// 2. 利用对象字面量创建对象var obj2 = {};// 3.利用构造函数创建对象function Star(uname,age) { this.uname = uname; this.age = age; this.sing = function() { console.log('我会唱歌'); }}var ldh = new Star('刘德华',18);
注意:
new
一起使用才有意义new
一起使用new 在执行时会做四件事
JavaScript 的构造函数中可以添加一些成员,可以在构造函数本身上添加,也可以在构造函数内部的this
上添加。通过这两种方式添加的成员,就分别称为静态成员和实例成员。
// 构造函数中的属性和方法我们称为成员,成员可以添加 function Star(uname,age) { this.uname = uname; this.age = age; this.sing = function() { console.log('我会唱歌'); } } var ldh = new Star('刘德华',18); // 实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员 // 实例成员只能通过实例化的对象来访问 ldh.sing(); Star.uname; // undefined 不可以通过构造函数来访问实例成员 // 静态成员就是在构造函数本身上添加的成员 sex 就是静态成员 // 静态成员只能通过构造函数来访问 Star.sex = '男'; Star.sex; ldh.sex; // undefined 不能通过对象来访问
构造函数方法很好用,但是存在浪费内存的问题。
prototype
属性,指向另一个对象,注意这个prototype
就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有prototype
对象上,这样所有对象的实例就可以共享这些方法问答:原型是什么?
prototype
为原型对象问答:原型的作用是什么?
_proto_
指向构造函数的prototype
原型对象,之所以我们对象可以使用构造函数prototype
原型对象的属性和方法,就是因为对象有_proto_
原型的存在。_proto_
对象原型和原型对象prototype
是等价的_proto_
对象原型的意义就在于为对象的查找机制提供一个方向,或者说一条路线,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象prototype
Star.prototype 和 ldh._proto_
指向相同对象原型(__ proto __)和构造函数(prototype)原型对象里面都有一个属性constructor属性, constructor 我们称为构造函数,因为它指回构造函数本身。
constructor
主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数
一般情况下,对象的方法都在构造函数(prototype)的原型对象中设置
如果有多个对象的方法,我们可以给原型对象prototype
采取对象形式赋值,但是这样会覆盖构造函数原型对象原来的内容,这样修改后的原型对象constructor
就不再指向当前构造函数了。此时,我们可以在修改后的原型对象中,添加一个constructor
指向原来的构造函数
具体请看实例配合理解
_proto_
指向的prototype原型对象
)this
指向我们的实例对象this
指向的是这个方法的调用者,也就是这个实例对象注意:
Array.prototype = {}
,只能是Array.prototype.xxx = function(){}
的方式ES6 之前并没有给我们提供extends
继承
调用这个函数,并且修改函数运行时的 this 指向
fun.call(thisArg,arg1,arg2,......)
thisArg
:当前调用函数 this 的指向对象arg1,arg2
: 传递的其他参数示例
call()
把父类型的 this 指向子类型的 this,这样就可以实现子类型继承父类型的属性核心原理:
prototype 原型对象 = new 父类()
constructor
重新指向子类的构造函数prototype
属性上_proto_
指向类的prototype
原型对象ES5 给我们新增了一些方法,可以很方便的操作数组或者字符串
array.forEach(function(currentValue,index,arr))
array.filter(function(currentValue,index,arr))
filter()
方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组some()
方法用于检测数组中的元素是否满足指定条件(查找数组中是否有满足条件的元素)trim()
方法会从一个字符串的两端删除空白字符trim()
方法并不影响原字符串本身,它返回的是一个新的字符串Object.keys()
用于获取对象自身所有的属性for...in
Object.defineProperty()
定义对象中新属性或修改原有的属性(了解)Object.defineProperty(obj,prop,descriptor)
var fn = new Function('参数1','参数2',.....,'函数体');
Function 里面参数都必须是字符串格式
第三种方式执行效率低,也不方便书写,因此较少使用
所有函数都是 Function 的实例(对象)
函数也属于对象
this
指向,是当我们调用函数的时候确定的,调用方式的不同决定了this
的指向不同,一般我们指向我们的调用者调用方式 | this指向 |
---|---|
普通函数调用 | window |
构造函数调用 | 实例对象,原型对象里面的方法也指向实例对象 |
对象方法调用 | 该方法所属对象 |
事件绑定方法 | 绑定事件对象 |
定时器函数 | window |
立即执行函数 | window |
bind(),call(),apply()
三种方法call()
方法调用一个对象,简单理解为调用函数的方式,但是它可以改变函数的this
指向fun.call(thisArg,arg1,arg2,.....)
thisArg
: 在 fun 函数运行时指定的 this 值arg1,arg2
: 传递的其他参数apply()
方法调用一个函数,简单理解为调用函数的方式,但是它可以改变函数的this
指向fun.apply(thisArg,[argsArray])
bind()
方法不会调用函数。但是能改变函数内部this
指向fun.bind(thisArg,arg1,arg2,....)
this
值和初始化参数改造的原函数拷贝call apply bind 总结:
相同点:
this
指向区别点:
call
和apply
会调用函数,并且改变函数内部的this
指向call
和apply
传递的参数不一样,call 传递参数,apply 必须数组形式bind
不会调用函数,可以改变函数内部this
指向主要应用场景
call
经常做继承apply
经常跟数组有关系,比如借助于数学对线实现数组最大值与最小值bind
不调用函数,但是还想改变this指向,比如改变定时器内部的this指向相关推荐:javascript学习教程
以上がJavaScript のオブジェクト指向の側面を整理する (概要の共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。