JS new演算子の深さ分析

入門

  • 我々は、すべてのことを知っているnewの演算子jsの一般的には、コンストラクタのインスタンスを作成するために使用され、それが特異的に行われているもののインスタンスを作成し、MDNドキュメントはそう言う:私は最後に、全く手がかりを見て理解するために始めたものをするために、多くの情報へのオンラインアクセスによって背後にある意味new予備理解演算子を持っています。

    1.空の単純なJavaScriptオブジェクトを作成し(すなわち、{});
    2、オブジェクトへのリンク(すなわち、オブジェクトコンストラクタセット)別のオブジェクトに、
    図3に示すように、この文脈のステップ1として新しく作成されたオブジェクト、
    4、関数はオブジェクトを返さない場合、これが返されます。

通常の関数とコンストラクタの違い

  • 本質的な違いJS通常の関数とコンストラクタでは、関数で、コンストラクタは最初の文字(通常の機能とコンストラクタを区別する主な目的)を活用することに合意しました。そして、することによりnew、コンストラクタを呼び出し、オペレータのインスタンスを作成します。

new演算子を何をします


 var _this = null
 function Fun(){
     this.name = '车神-黄杰'
     this.gender = '男'
     this.age = 23
    
     _this = this       
     console.log('this--->', this)
 }

 var foo = new Fun()        
 console.log('foo--->', foo)
 console.log('foo === _this--->', foo === _this)
 console.log('name--->', foo.name)

出力

ヌルオブジェクトを作成する(第一ステップ)


 var fun = new Object()

オブジェクトへのリンク(第2ステップ)

  • 実際には、最初のステップで作成したヌルオブジェクトに設定しているプロパティやコンストラクタ同じメモリアドレスに属性ポイントを。fun__proto__Funprototype

 var fun = new Object()// 1
 fun .__proto__ = Fun.prototype// 2

新しく作成された(第3工程)のコンテキストとしてこのオブジェクト

  • そして、ここでは第二のステップ、ステップで作成された空のオブジェクトに似ているfunthis同じメモリアドレスへのポイント(これは私の個人的な理解です)

 var fun = new Object()// 1
 fun .__proto__ = Fun.prototype// 2
 this = fun// 3

戻り値(第四工程)

  • 私たちは、呼び出し元の関数であることを知っている括弧が続いて、関数名、インスタンスコンストラクタを作成しているnew Fun()コンストラクタが内部のコードを実行するためにバインドされていることを、コンストラクタを自然に呼び出します。コンストラクタが(これはオブジェクトであることに注意してください)特定のオブジェクトを返さない場合は、デフォルトではこれを返すことです。実行var foo = new Fun()されたものであり、このコードをfoo戻り値を受信しthis、その結果であるfooにも指すthisメモリ・アドレスと、を指摘しました。はっきり空のオブジェクト、それを置くためにfunthis例えばfoo同じメモリアドレスを指しています。あなたが行くときにthis追加するname、gender、ageプロパティを、自然の例はfooまた、アクセスすることができます。

暗黙のパラメータ

  • ときに、関数呼び出しを渡さないのはなぜthis和arguments、それが関数呼び出し時に2つのパラメータを渡す暗黙のデフォルトであるため、彼らは、それを使用することができthis和argumentsthis第三段階であるがthisargumentsアレイは、擬似オブジェクトは、関数に渡されたすべてのパラメータが含まれています。

コンストラクタは、特定のオブジェクトを返します。

  • 戻り新たな目的関数(これはオブジェクトであることに留意されたい)を構築するとき、実行var foo = new Fun()コードのこのfoo特定のオブジェクトのコンストラクタが返さ受信されます。

 var _this = null
 function Fun(){
     this.name = '车神-黄杰'
     this.gender = '男'
     this.age = 23
    
     _this = this       
     console.log('this--->', this)
    
    //返回新的对象
     return {name: '我是新的name'}
 }

 var foo = new Fun()        
 console.log('foo--->', foo)
 console.log('foo === _this--->', foo === _this)
 console.log('name--->', foo.name)

出力

アナログnew演算子

  • 二つの主なメソッド関数オブジェクトをここでの使用apply、call一般的に、関数を呼び出すと特異的結合できるということですthis
 function cloneNew(){
                
     //先获取传递进来的构造函数对象 
     //默认为第一个参数 由于arguments不是数组
     //不能直接使用数组的shift方法(自己了解 shift 的方法使用)
     //可以通过函数的call方法获取并去除arguments的第一个参数
     var constructor = [].shift.call(arguments)             
                
     //第一步:创建一个空对象
     var obj = new Object()
                
     //第二步:链接该对象
     obj.__proto__ = constructor.prototype
                
     //第三步:新创建的对象作为this的上下文 
     //这里借助函数对象的 apply 方法,对应还有一个 call 方法
     var newObj = constructor.apply(obj,arguments)
                
     //第四步:判断构造函数有没有返回具体的对象
     return newObj instanceof Object ? newObj : obj             
 }
            
 //返回this           
 function Fun(name){
     this.name = name
 }

 //返回具体对象           
 function Foo(name){
     this.name = name
     //返回具体得到对象
     return {name: '新的黄杰'}
 }
            
 var fun = cloneNew(Fun, '黄杰')
 var foo = cloneNew(Foo, '黄杰')
            
 console.log('this的name--->'+ fun.name)// 输出 黄杰
 console.log('构造函数返回具体对象的name--->'+ foo.name)//输出 新的黄杰

出力

注意を払います

  • ここでの完全な議論であるnewオペレータは特に対応していませんでした、this問題のポイントを、我々はまた、常に間違っているならば、私は展示会を懇願、学ぼうとしています。

おすすめ

転載: www.cnblogs.com/HJ412/p/11235831.html